Ext JS の味見 - 7
「いよいよ、GridPanel へ。」
本題とは関係ないけど、今回から少しだけ見栄えを変えることにしたので、上の方に css が付いている。Ext JS のロジックには影響を与えないので、説明は省略。説明することもないしね。:-)
GridPanel あたりから少し難易度が上がるので、味見企画としては悩ましいところだけれども、避けて通る分けにはゆかない。この強力なパーツがあるからこそ、仕事で使えると言っても過言ではない。GridPanel と同等のことを HTML, CSS, JavaScript だけで実現しようとして、どえらく苦労したことがある。ってゆーか、その時に Ext JS を見つけて、すっかり Ext JS に入れ込むことになったんだけどね。(^^; 2 ヶ月ほどかけてもうまく実現できなかったことが、Ext JS なら 10 分もあれば簡単に実現できてしまうので、ぜひとも、Ext JS のグリッドパネルを知ってもらいたいところ。
GridPanel は関連するクラスも多く、バリエーションも豊富なので、すべてを理解するのは、けっこう大変。今回は、最小限の構成の GridPanel を見てもらうことにする。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .test { margin: 5mm; } .test h1 { background-color: darkblue; color: white; padding: 10px; } .test h2 { text-align: right; } </style> <!-- CacheFly を使って、Ext JS を読み込む --> <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script> <script type="text/javascript"> function sample7() { // グリッドに表示するデータストア。 var store = new Ext.data.SimpleStore({ fields: // データ項目の定義 ['name', 'v1', 'v2'], data: [ // データの配列 ['山田', '100', '200'], ['鈴木', '200', '300'], ['木村', '300', '400'], ['田中', '400', '500'], ['井上', '500', '600'], ['森田', '600', '700'], ['片山', '700', '800'], ['谷口', '800', '900'] ] }); // グリッドパネルの定義 var panel = new Ext.grid.GridPanel({ title: 'Grid Test', height: 200, width: 320, store: store, // グリッドに表示する Store を指定 columns: [ // グリッドの列項目の指定 {header: 'なまえ', dataIndex: 'name'}, {header: '値1', dataIndex: 'v1'}, {header: '値2', dataIndex: 'v2'} ] }); return panel; } Ext.onReady(function() { var panel = sample7(); panel.render('foo7'); }); </script> </head> <body class="test" style=""> <h1>Ext JS の味見 - 7</h1> <h2>- グリッドテーブル -</h2> <br /> <div id="foo7"></div> </body> </html>
たった、これだけのコードで、Excel 風の表でデータを見ることができ、ヘッダーを固定したスクロールもできる。ヘッダーをクリックすれば、メニューが出てきて、列の表示/非表示を切り替えることもできる。
まだまだ、ホンの入り口だが、今回のところは、一先ずは GridPanel が Store を表示するモノであるってゆーところが重要。ただの配列を表示するのに、面倒な手続きがいるように思うかもしれないが、xml や json など、他の形式のデータの場合も同じパターンが使えるところが重要で、GridPanel はデータ形式に依存しないようになってるって訳だ。