ExtJSで楽しくRIA業務アプリ開発

もうグリッドはもうほんとにネタ切れですね、前回のTwitter APIを少し修正して最新一時間以内のtweetが分かるように背景色を変えてみたいと思います。グリッドの見た目はGridViewで変更します。GridViewはGridPanelクラスのviewConfigで設定できるということも以前のサンプルで紹介したので、今回はささっとサンプルを紹介します。

ほぼ前回のサンプルコードをそのまま使用するので、前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門30　Twitter Search APIを使ったグリッドパネル

グリッドパネル関連の過去の記事はこちらからです。

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える
• ExtJS入門19　グリッドにページング機能を追加する
• ExtJS入門20　グリッドにフィルタリング機能を追加する
• ExJS入門21　グリッド・セレクション・モデル
• ExJS入門22　グリッドのイベント処理（ダブルクリック、右クリック）
• ExtJS入門23　グリッドへの項目の追加と削除
• ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
• ExJS入門25　エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
• ExJS入門26　エディタブル・グリッド（色々なエディターを設定する)
• ExJS入門27　もう一つのエディタブル・グリッド　ux.RowEditorプラグイン
• ExJS入門28　チェックボックス付きグリッドパネル
• ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
• ExJS入門30　Twitter Search APIを使ったグリッドパネル

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridViewクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridView

Read the rest of this entry »

前回はJSONPを使ってYouTubeの情報をグリッドに表示するサンプルを紹介しました。今回も外部APIの利用第2弾ということにして、Twitter APIを使ってTwitterのアップデートをグリッドに読み込んでみます。

今回はJSONPを使ったAPIの利用に加えて、グリッドを自動更新するためのExt.TaskMgrクラスを使ったサンプルコードの紹介になります。
前回のチュートリアルがお済でない方はこちらからどうぞ
ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

グリッドパネル関連の過去の記事はこちらからです。

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える
• ExtJS入門19　グリッドにページング機能を追加する
• ExtJS入門20　グリッドにフィルタリング機能を追加する
• ExJS入門21　グリッド・セレクション・モデル
• ExJS入門22　グリッドのイベント処理（ダブルクリック、右クリック）
• ExtJS入門23　グリッドへの項目の追加と削除
• ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
• ExJS入門25　エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
• ExJS入門26　エディタブル・グリッド（色々なエディターを設定する)
• ExJS入門27　もう一つのエディタブル・グリッド　ux.RowEditorプラグイン
• ExJS入門28　チェックボックス付きグリッドパネル
• ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.TaskMgrクラス
http://extdocs.xenophy.com/?class=Ext.TaskMgr

ExtJS -3.0 日本語APIドキュメント – Ext.data.DataProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.DataProxy

ExtJS -3.0 日本語APIドキュメント – Ext.data.ScriptTagProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.ScriptTagProxy

Read the rest of this entry »

今回もグリッドパネルです。今回はJSONPを使ってYouTube Data APIを呼び出して、グリッドに表示するサンプルコードになります。
JSONPを使うことで別ドメインのAPIをJavascriptで呼び出すことができます。Google Data APIはJSONPにも対応しているため、利用が簡単です。

グリッドパネル関連の過去の記事はこちらからです。

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える
• ExtJS入門19　グリッドにページング機能を追加する
• ExtJS入門20　グリッドにフィルタリング機能を追加する
• ExJS入門21　グリッド・セレクション・モデル
• ExJS入門22　グリッドのイベント処理（ダブルクリック、右クリック）
• ExtJS入門23　グリッドへの項目の追加と削除
• ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
• ExJS入門25　エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
• ExJS入門27　もう一つのエディタブル・グリッド　ux.RowEditorプラグイン
• ExJS入門28　チェックボックス付きグリッドパネル

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.data.DataProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.DataProxy

ExtJS -3.0 日本語APIドキュメント – Ext.data.ScriptTagProxyクラス
http://extdocs.xenophy.com/?class=Ext.data.ScriptTagProxy

Read the rest of this entry »

そろそろグリッドに関してもネタがなくなってきましたが、今回はグリッドにチェックボックスを追加するサンプルを紹介します。今回はExJS入門21　グリッド・セレクション・モデルのサンプルコードを使って、チェックボックス付きグリッドに変更します。

グリッドパネル関連の過去の記事はこちらからです。

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える
• ExtJS入門19　グリッドにページング機能を追加する
• ExtJS入門20　グリッドにフィルタリング機能を追加する
• ExJS入門21　グリッド・セレクション・モデル
• ExJS入門22　グリッドのイベント処理（ダブルクリック、右クリック）
• ExtJS入門23　グリッドへの項目の追加と削除
• ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
• ExJS入門25　エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
• ExJS入門27　もう一つのエディタブル・グリッド　ux.RowEditorプラグイン
• 第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.grid.CheckboxSelectionModelクラス
http://extdocs.xenophy.com/?class=Ext.grid.CheckboxSelectionModel

Read the rest of this entry »

Ext.gri.EditorGridクラスは、グリッドを表計算ソフトのように編集できるグリッドです。今回はもう一つのエディターグリッドといえるRowEditorを使ったグリッドのサンプルを紹介します。

RowEditorはユーザーエクステンション(ux)です。
ユーザーエクステンションは世界中のExtJS開発者が作成して、ExtJSのフォーラムの等で自身のUXを公開しています。
ExtJS Forum http://www.extjs.com/forum

またUXの情報が集められているhttp://extjs-ux.org/もあります。ここにはUX版のAPIドキュメントをまとめたものもあります(全てのUXを網羅しているわけではありませんが)。
UXはExtJSの基本ライブラリ以外には含まれないので、使いたいUXを見つけた場合は開発者のページ等からJS,CSS,画像等のファイルを入手する必要があります。
今回のRowEditorはextjs-ux.orgには無いようです。ExtJSのサンプルのページのRowEditorのサンプルからダウンロードするか、
以下の作者のサイトからも入手できます。
Using the ExtJS Row Editor

グリッドパネル関連の過去の記事はこちらからです。

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える
• ExtJS入門19　グリッドにページング機能を追加する
• ExtJS入門20　グリッドにフィルタリング機能を追加する
• ExJS入門21　グリッド・セレクション・モデル
• ExJS入門22　グリッドのイベント処理（ダブルクリック、右クリック）
• ExtJS入門23　グリッドへの項目の追加と削除
• ExtJS入門24　エディタブル・グリッドの基本(グリッドパネルをエディタブル・グリッドに変更)
• ExJS入門25　エディタブル・グリッド(Ext.Ajaxを使った編集内容の保存)
• ExJS入門26　エディタブル・グリッド（色々なエディターを設定する)

Read the rest of this entry »

今回は空っぽのグリッドに対して、新規項目の追加とグリッドの項目の削除を行うサンプルを紹介します。
ローカルのデータを取り扱います。(サーバーサイドのプログラムを使ってグリッドのデータを取得している場合は、サーバー上のデータを削除する必要があります。)

グリッドのデータはストアで管理されています。グリッドは常にストアの状況を把握しています。ストアの情報に変化があった場合は即座にグリッドに反映されます。グリッドへの項目の追加と削除はグリッドのストアへの項目の追加と削除を行っているといえます。

グリッドパネル関連の過去の記事はこちらからです。

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える
• ExtJS入門19　グリッドにページング機能を追加する
• ExtJS入門20　グリッドにフィルタリング機能を追加する
• ExtJS入門21　グリッド・セレクション・モデル
• ExtJS入門22　グリッドのイベント処理（ダブルクリック、右クリック）

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.data.JsonStoreクラス
http://extdocs.xenophy.com/?class=Ext.data.JsonStore

ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridViewクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridView

Read the rest of this entry »

前回はツールバーでグリッドの情報を取得し、ポップアップで表示しました。今回はグリッドのダブルクリックと右クリックのイベントで詳細を表示する処理を実行します。

グリッドのダブルクリックと右クリック（コンテクストメニュー）で処理を実装することで、より直感的なグリッドの操作が可能になります。
サンプルは前回のExJS入門21　グリッド・セレクション・モデルをベースにイベントの処理を追加しています。

グリッドパネル関連の過去の記事はこちらからです。

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える
• ExtJS入門19　グリッドにページング機能を追加する
• ExtJS入門20　グリッドにフィルタリング機能を追加する
• ExtJS入門21　グリッド・セレクション・モデル

リファレンスはこちらから
今回はExt.menu.Menuクラスを右クリックに仕込んでいます。

ExtJS -3.0 日本語APIドキュメント – Ext.grid.GridPanelクラス
http://extdocs.xenophy.com/?class=Ext.grid.GridPanel

ExtJS -3.0 日本語APIドキュメント – Ext.menu.Menuクラス
http://extdocs.xenophy.com/?class=Ext.menu.Menu

Read the rest of this entry »

グリッド関連4回目は、セレクションモデルを設定して、行の選択状態を取得する簡単なサンプルです。
ExtJSのグリッドの様々なセレクションモデルを設定して、行の選択の仕方を指定します。今回は一番基本となる、単一の行を選択するセレクションモデルを設定して、その行の情報を取り出すようにします。以前に紹介したグリッドのサンプルではセレクションモデルが明示的に設定されていないためグリッドのデフォルトのセレクションモデルが自動的に設定されていました。実際に試してもらうと分かりやすいのですが、Ctrlもしくはcommandキーを押しながらクリックすると複数選択ができます。
今回のサンプルではセレクションモデルを独自に設定して、一行だけを選択するようにします。

Read the rest of this entry »

引き続きGridPanel関連のサンプルの紹介です。
今回はグリッドに表示されている一覧から特定のデータをフィルタリングして表示する方法をご紹介します。

グリッドのデータはストアによって管理されています。グリッドの一覧からフィルタリングして特定の情報だけを表示したい場合は、大きく二つの方法があります。
一つはstoreクラスのfilterメソッドを使ってフィルタリングを行う方法。もう一つはstoreがロードしているデータをフィルタリングされたデータに更新する、つまりサーバーサイドでフィルタリングを行ってstoreを更新する方法があります。
今回はこの2つの機能を同時に持ったグリッドパネルのサンプルになります。

グリッドパネルについてはこちらもご覧下さい。

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える
• ExtJS入門19　グリッドにページング機能を追加する

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.data.Storeクラス
http://extdocs.xenophy.com/?class=Ext.data.Store

Read the rest of this entry »

かなり更新をさぼってしまいましたが。勉強会に向けてGrid関連のサンプルを紹介していきます。

今回はGridにページング機能を追加するサンプルになります。
多くのwebアプリケーションで項目の一覧を表示する際にページング機能が実装されています。ExtJSの一覧表示といえばGridPanelですが、GridPanelに簡単にページング機能を追加するためのExt.PagingToolbarというものがあります。今回はこのPagingToolbarをグリッドに使ってみます。

グリッドパネルについてはこちらを

• ExtJSで楽しくRIA業務アプリ開発 ExJS入門17　グリッド・パネル　基本編
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門18　グリッド　レンダラーを使ってデザインを変える

リファレンスはこちらから
ExtJS -3.0 日本語APIドキュメント – Ext.PagingToolbar
http://extdocs.xenophy.com/?class=Ext.PagingToolbar

Read the rest of this entry »