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

前回は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 »

今回はエディタブル・グリッド(エディター・グリッド)の紹介です。エディタブルとエディターはどっちの方が正しいのかわかりませんが。クラス名はエディター･グリッドなのですが、ここではエディタブル・グリッドで統一します。
エディタブル・グリッドはグリッドの内容をグリッド上で直接編集する機能です。一般的にはカラムのダブルクリックで編集することが多いと思います。今回は以前紹介したグリッドへの追加と削除をベースにエディタブル・グリッドに変更します。

ExtJS　フォームの基本とExtJS入門23を先にご覧下さい。

• ExtJS入門　ExtJSのフォームについて（基本編）
• ExtJS入門23　グリッドへの項目の追加と削除

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

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

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

Read the rest of this entry »

前回までグリッドについてのサンプルを紹介してきましたが、今回はグリッドを少しはなれてExtJSのフォームについて簡単に紹介をします。

前回のサンプルでグリッドに項目を追加する際に、おまけで紹介した、任意の値を追加する処理にExtJSのフォームがでてきました。ユーザーに何かしらの入力を促す際、フォームは重要になってきます。グリッドに入力を追加するだけでなく、既存の値を変更する場合もフォームで入力させるのが一般的です。今回はExtJSのフォームのなかでも基本中の基本の部分を簡単に紹介します。

• ExtJS入門23　グリッドへの項目の追加と削除

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

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

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

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

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

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

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 »

DomHelperで要素を追加するの追加項目です。
DomHelperで要素の追加を行うときappendでは対象の要素の子の要素として要素を追加しましたが、insertBefore,insertAfterでは対象の要素の前後に要素を追加します。
今回はあえてパネルを使わずにやってみます。

DomHelperについてはこちらにサンプルがあります。

• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門13 Ext.DomHelperの使い方
• ExtJSで楽しくRIA業務アプリ開発 ExtJS入門14　DomHelperの使い方2

Read the rest of this entry »

グリッドのデザインを変更するための機能として、レンダラー機能があります。
レンダラーを使うと、グリッドに設定する値を調整したり、デザインを変更することができます。

レンダラーはカラムごとに設定します。そのためカラムモデルで各カラム設定に追加します。

前回のグリッドのサンプルを使って、レンダラーを使ってデザインを変更してみます。
Read the rest of this entry »