- スポンサード リンク
[Ext.js]GridPanelを使ってJSONの内容を表示してみる
実際はJSONの方が使いやすそう？？という思い込みで
前回はXMLデータを元にGridPanelで表示するサンプルをやってみたので、今度はあまり進展も無く「JSONデータ」をGridPanelに表示させるサンプルでも作ってみようと思います。
JSONデータを用意してみる。
とりあえず前回と同様、、ダライアスのプチデータベースを作っていく方向で考えてみようと思います。
最初は簡単に、以下のようなJSONデータを用意してみました。
ext003.json
小手調べに、正統シリーズのみを取り出して、タイトルと発売年を表に。情報量が寂しい。寂しすぎる。でも許してちょびひげ（←むしろこれが許せない）
次にHTMLを用意する。
超シンプルなExt.jsで表を表示するだけのHTMLを用意します。パスはchin3.net仕様なので各自好きなように似るなり焼くなりさっと炙るなり軽く湯通しするなりしてください。
ext003_2.html
最後にJSONを読み込んで表を表示する
Ext.grid.GridPanelで表を表示する、という流れは前回と全く変わりません。
データ（Store）の生成手段が異なります。
今回はJsonを元にStoreを生成するので、 Ext.data.JsonStore を利用します。
jsonStoreには、
- url（読み込みデータファイル。今回はext003.json）
- root（使用する要素名）
- fields（レコード（フィールド）名）
という感じで定義。
なんか我ながら手探りすぎて説明が下手だったりしてますが、ちろっとソースを眺めてもらえれば何となく分かるはず。
サンプル
雑感
個人的にはJSONでやりとりすることが多くなりそう？なので、、今後はJSONメインでサンプルを作成していこうかな、と思います。
2010/02/28
関連項目
雑多なもの
- PNGを背景でrepeatさせたい時のIE6対策
- onloadイベントの呼び出しがhistory.backとかの時にブラウザ毎に挙動違うのが気になったので軽く調査
- 画像のフェードイン・フェードアウト（rico.js）
- 画像の上に画像を配置してフェード（透過）
- IE判定簡易版
- AjaxのresponseTextでSafariだけが華麗に文字化けする件
- FLASHの上に画像（レイヤー）を置きたい
- スムーズにページ内スクロールさせたい
- 半角英数の連続文字列を改行させたい
- フォームで条件によって項目を切り替え表示してみる
- jsファイルを動的に読み込む事について考える
- GoogleMapsがIEで表示されなかったりした場合
Ext.js
- とりあえずExt.js導入からダイアログ（アラート）表示までやってみる
- GridPanelを使ってXMLの内容を表示してみる
- GridPanelを使ってJSONの内容を表示してみる
- TreePanelを使ってみる
jquery
- IE6でもPNGで透過したいし簡単にロールオーバーさせたい
- 画像及びテキストのフェードイン・フェードアウト（jQuery）
- テーブルで1行毎に色を変えるアレ
- ちょっと変わったダイアログ的なものを表示する
- jQuery.jsとprototype.jsを同居させたい
- jquery.pager.jsを試してみる
lightwindow,greybox
SyntaxHighlighter
特別企画「犯人はヤス」
- 技術資料