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

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

グリッドのダブルクリックと右クリック（コンテクストメニュー）で処理を実装することで、より直感的なグリッドの操作が可能になります。
サンプルは前回の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関連のサンプルを紹介していきます。

Ext.PagingToolbar

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

今回は弊社で作成したExtJSを活用したサイトの紹介です。

Wedding Stage GRACEL（ウエディングステージ グレイセル）は、愛知県の北東部に位置する総合結婚式場です。
今回サイトをリニューアルするにあたり管理画面をExtJSのViewportアプリで構築し、トップページやギャラリーなどではExt Coreを活用しています。

サイトはこちらになります。

Wedding Stage Gracel – 瀬戸、尾張旭、長久手エリアの結婚式場ならウェディングステージ　グレイセル

株式会社sus4ニュースリリース グレイセル様Webサイトをリニューアルしました

Read the rest of this entry »

今回は備忘録も兼ねてFireFoxのコンテクストメニュー（右クリックメニュー）とExtJSで設定したコンテクストメニューが重なる場合の対処方法の紹介です。

グリッドなどで独自のコンテクストメニューを作成したときに、ブラウザのメニューを出さないようにキャンセルさせるには、以下のようにコンテクストメニューのイベントでe.stopEvent();を実行します。

/**
 * コンテクストメニューを生成
 */
onContextClick: function(grid, index, e)
{
	・・・

	e.stopEvent();
	grid.contextMenu.showAt(e.getXY());

	・・・
}

通常はこれでブラウザのコンテクストメニューはキャンセルされて表示されません。

コンテクストメニュー（正常な動作）

しかしFirefoxでは、まれに以下のようにブラウザのメニューが表示されてしまい、Extのメニューを覆ってしまいます。

コンテクストメニュー（ブラウザメニューとかぶっている）

この動作はJavaScriptのコードバグではなく、ブラウザのJavaScriptの実行設定が原因のようです。

ブラウザのJavaScriptの実行設定を変更します。
Firefox　>　ツール　>　オプション　>　コンテンツ　>　JavaScriptを有効にする　＞　詳細設定　>　コンテキストメニューを無効化または変更する　にチェックを入れる

Firefoxの設定

これでExtのコンテキストメニューだけが表示されるようになります。
JavaScriptのセキュリティを強化しているFirefoxでよく見かけるので、特定のFirefoxだけおかしい場合に疑ってみてください。

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

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

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

いよいよグリッド・パネルをサンプルをやっていこうと思います。
まず基本として、ごくシンプルなグリッドパネルを作成します。

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

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

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

グリッドパネルについて
グリッドパネルはスプレッドシートのような表を作るウィジェットで様々なデータを一覧表示させるのに便利です。ExtJSではExt.grid.GridPanelやExt.grid.EditorGridなどが用意されており、高機能なグリッドを作成することができます。

グリッドパネルの作るために必要な要素はデータソースと表示列（カラム）の設定です。
データソースはExtJSではストア(store)と呼ばれます。ストアはJSONやXML等のデータをExtJS内で保持するためのかたちです。
ストアに渡すデータはローカル変数でもリモートのAPIでも構いません。JsonStoreやXmlStoreを使えば簡単にJSON形式、XML形式のデータをストア格納できます。

表示列の設定は、ストアに格納しているデータをどのようなカラムでグリッドに表示するかを設定します。Ext.grid.ColumnModelクラスを使います。

簡単なグリッドであれば以上の2つをグリッドクラスのコンフィグに設定するだけで、あとはGridクラスがすべてやってくれます。
早速サンプルを紹介します。

Read the rest of this entry »