pages
Archives
- 2010 年 2 月 (3)
- 2010 年 1 月 (9)
- 2009 年 12 月 (14)
- 2009 年 11 月 (3)
- 2009 年 9 月 (1)
- 2009 年 8 月 (2)
- 2009 年 7 月 (2)
- 2009 年 6 月 (1)
- 2009 年 4 月 (3)
- 2009 年 3 月 (4)
Blogroll
- Ext Japan - ExtJSの日本語サポートを行っています。
- ExtJapan - 日本語APIドキュメントもあります
- 蜘蛛の糸をつむぐには - ExtJSのまとめ情報あり
4
1 月
HTMLのTABLEをExt JSに変換するスクリプトです。Ext JSのサンプルとほぼ同じです。
HTMLの部分は次の通りです。実際の動作はこちらで確認できます。ちなみにExt JSのバージョンは2.3.0です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>HTMLのテーブルをGridに変換</title>
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
<script type="text/javascript" src="../script/grid/from_markup.js"></script>
</head>
<body>
<button id="create-grid">変換</button>
<table id="table1">
<thead>
<tr>
<th>ショップ名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>ショップA</td>
<td>2000</td>
</tr>
<tr>
<td>ショップB</td>
<td>1500</td>
</tr>
<tr>
<td>ショップC</td>
<td>2300</td>
</tr>
<tr>
<td>ショップD</td>
<td>2500</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
Ext.onReady(function(){
var btn = Ext.get("create-grid");
btn.on("click", function(){
btn.dom.disabled = true;
// create the grid
var grid = new Ext.grid.TableGrid("table1", {
stripeRows: true // stripe alternate rows
});
grid.render();
}, false, {
single: true
}); // run once
});
</script>
</body>
</html>
- 12行目
ボタンにid属性を指定します。このid属性を指定してボタン要素を取り出します(41行目)。 - 13〜38行目
TABLE要素です。Gridに変換する際にid属性を指定して，TABLE要素を特定します(46行目)。 - 14〜19行目
ヘッダはTHEAD要素で囲みます。この指定を忘れると正しくGridに変換できません。 - 20〜37行目
データはTBODY要素で囲みます。これも忘れると正しくGridに変換できなくなります。 - 40行目の Ext.onReady
HTMLがすべて読み込まれた後で実行される関数です。Ext JSを利用するときは，このExt.onReady関数の中に処理を書いていきます。 - 41行目
ボタン要素を取得 - 42〜53行目
ボタンが押された時の処理を指定- 43行目
ボタンをディセーブルします。2度押されないようにということですね。 - 46〜48行目
HTMLをGridに変換します。 - 49行目
Gridをレンダリングします。
- 43行目
Wordpress theme by Wordpress Themes & made free by Internet Marketing Center
Edit here in the footer.php
No user resposed " HTMLのTABLEをExt JSのGridに変換する "