5
1 月

HTMLのTABLEをExt JSのGridに変換する その2

Posted by: admin
in ExtJS, PCパーツ価格速報

昨日，アップした「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等を指定します。

No user resposed " HTMLのTABLEをExt JSのGridに変換する その2 "

"HTMLのTABLEをExt JSのGridに変換する その2" was posted by admin and received no user commented
Welcome stranger, please leave your commnets below

  Username (必須)

  Email (必須)

  Website

leave your comments below

Subsribes to this topic Comment Rss or TrackBack

about

ようこそPCパーツ価格速報ブログへ。 パーツ購入の際のお役に立てれば何よりです。

categories

meta

calendar

2010 年 9 月
月 火 水 木 金 土 日
« 2 月    
 12345
6789101112
13141516171819
20212223242526
27282930