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のまとめ情報あり
5
1 月
昨日,アップした「HTMLのTABLEをExt JSのGridに変換する」では,TABLEタグのデータをそのまま利用していたわけですが,当然,このデータの見せ方を変えたいということもあるわけです。
TABLEタグを変換する際に,configオプションとしていろいろと指定できるんですよというお話です。
HTMLは以下の通りです。実際の動作はこちらで確認できます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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
width: 200,
fields:[
{type: 'string', name: 'shop'},
{type: 'int', name: 'price'}
],
columns:[
{dataIndex: 'shop',width: 120, header: '店名'},
{dataIndex: 'price', width:80, header: '販売価格'}
],
});
grid.render();
}, false, {
single: true
}); // run once
});
</script>
</body>
</html>
追加したのは49〜52行目の「field」と,53〜56行目の「columns」の指定です。
今回のスクリプトでは,columnsオプションに列幅や列タイトルを指定して,Gridを表示する際の列幅や列名をTABLEタグでの指定とは異なるものに変更しています。
- 49〜52行目の「field」
Ext.data.Recordのcreateメソッドに渡す配列と同じものを指定します。HTMLタグのTABLEがExt.grid.TableGridでGridに変換される際,どのデータをどのようにGrid(実際にはGridと関連づけられているStore)に取り込むかを指定できます。 - 53〜56行目の「columns」
Ext.grid.GridPanelの初期化オプションcolumnsに指定する配列です。Gridの各列の列タイトルや列幅,renderer等を指定します。
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に変換する その2 "