ミニRSSリーダーを作ってみよう!
AJAX Feed APIのデータからデータストア用の配列を作る
まず、Google AJAX Feed APIを使ってフィードを読み込むことからはじめます。今回のサンプルファイルはダウンロードできますので、この中の「5941/sample/miniRssReader.html」を見ながらStepごとに解説します。ダウンロード(http://www.thinkit.co.jp/article/59/4/5941.zip)(5941.zip/585KB)。
最初に
次に「google.load('feeds', '1');」としてFeed APIを読み込みます。2番目の引数はバージョンを示しており、Google AJAX Feed APIのバージョン1をloadするという意味になります(miniRssReader.html:Step0参照)。将来新しいバージョンのAPIが提供されるのかもしれません。
Step1では、Ajax Feed APIのデータからデータストア用の配列を生成します。Feed APIの読み込み完了時のコールバック関数:feedInitializeを定義します。この関数は「google.setOnLoadCallback(feedInitialize);」とすることでFeed APIの読み込みが完了したときに実行されます。feedInitialize内では図1の処理を行っています。
Gridと詳細ビューを含むパネルを作る
Step2では、Step1で作成した配列からデータストアを生成します。前回(http://www.thinkit.co.jp/article/59/3/2/)解説した「定番のGridを使ってみる」と同様にExt.data.SimpleStoreクラスからデータストアを生成します。
Step3では、Step2で生成したデータストアからGridを生成します。ここでのポイントはcolumnsを指定するときにLinkとContentsはhiddenプロパティをtrueにしています。こうすることで内部的にデータは持っていてもGridの見た目上は表示しないということが設定できます。実際は4カラムのデータを持っていますが見た目上は2カラムになります。ただし、図2のようにカラムのヘッダで表示するオプションで表示させることも可能です。
Step4では、Gridと詳細ビューを含むパネルを生成します。Ext.PanelクラスからGridと詳細ビュー(id: 'detailPanel')を含むパネルを生成します。