ミニRSSリーダーを作ってみよう!

2008年5月23日(金)
林 俊之

Gridに対して詳細表示するためのイベントを登録する

Step5では、詳細ビューのテンプレートを作成します。Ext.Templateクラスから詳細ビューに表示する際のhtmlのテンプレートを定義します。{title}、{content}、{link}というのがgridのcolumnsのdataIndexに対応します。EXT JsではこのようにTemplateクラスがあるので、ひな形に合わせてhtmlを書き換えるという処理を簡単に行うことができます。

Step6では、Gridの行に対して詳細ビューに表示するイベントを登録します。「grid.getSelectionModel().on('rowselect',handler)」とすることでgridの行選択に対するイベント登録ができます。このときhandlerに対して「SelectionModel , 行番号 ,この行のExt.data.Recordオブジェクト」が渡されます。行のセルのデータはExt.data.RecordオブジェクトのdataプロパティにdataIndex名で登録されています。

「rssTemplate.overwrite(detailPanel.body, r.data);」では、Templateクラスのoverwriteメソッドで詳細ビューの書き換えを行っています。「detailPanel.body」はExt.getCmpで取得したコンポーネントオブジェクトから実際にhtmlが挿入されるエレメントを取得しています。「r.data」というのが先ほどのhandlerに対して渡されるExt.data.Record オブジェクトのdataプロパティとなります。

これでGridの行をクリックする度に、詳細ビューに表示されるようになります。

ブラウザで実行してみよう

では「5941/sample/miniRssReader.html」をブラウザで実行してみましょう。図3のように小さなRSSリーダーが表示されると思います。各行をクリックすると下の詳細ビューに中身が表示されるはずです。もっと見るをクリックすると実際のWebサイトにリンクします。Google AJAX Feed APIでのフィードデータ取得は、違和感なく高速に読み込めたと思います。

今回制作したものをベースにブログパーツにしたり、Adobe AirやOSXのウィジェットのようなデスクトップアプリケーションにするということも簡単にできると思います。

ちなみにFireFoxの場合、FireBugという開発支援プラグインをインストールし、enabledにしているとEXT Js全体の挙動が遅くなるので注意してください。あまりにも遅い場合は一時的にoffにすることをお勧めします。

いかがだったでしょうか?インターネットにつながっていればローカルのhtmlからでもこのRSSリーダーは機能しますので、Google AJAX Feed APIとEXT Jsを使ってみたい方はぜひお試しください。

次回は、Ajax開発の未来について紹介していきます。See you next week!

NTTレゾナント株式会社
So-net、MSNを経て現在gooを運営するNTTレゾナントでデザインエンジニアとして勤務。UIデザイン、HTML開発、JavaScript開発を主軸に仕事中。iGoogleガジェットコンテストで「インプレスR&D インターネットマガジン賞」を受賞。http://www.goo.ne.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています