PR

ミニ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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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