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

ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。

Ext.ux.form.FileUploadField

フォーム関連の過去の記事はこちらからです。

• ExtJS入門　ExtJSのフォームについて（基本編）
• ExtJS入門32　フォームパネルとフィールド(基本編)
• ExtJS入門33 Columnレイアウトのフォー
• ExtJS入門34 ComboBoxの基本
• ExtJS入門35 Tableレイアウトのフォーム
• ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示するム
• ExtJS入門38　独自のVTypeを定義してフォームを検証する

Read the rest of this entry »

今回はExtJSのフォームのエラー表示の便利な方法を紹介します。一般的なwebアプリの場合、FormPanelからフィールドの値をサーバーに送信後サーバーサイドで値のチェックが実行されます。その際にエラーが見つかった場合にそれをフィールドへ通知する便利な方法がExtJSでは用意されています。

サーバーからのエラー結果を表示する

フォーム関連の過去の記事はこちらからです。

• ExtJS入門　ExtJSのフォームについて（基本編）
• ExtJS入門32　フォームパネルとフィールド(基本編)
• ExtJS入門33 Columnレイアウトのフォー
• ExtJS入門34 ComboBoxの基本
• ExtJS入門35 Tableレイアウトのフォーム
• ExtJS入門36 HTMLの標準フォームにExtJSのフィールドを設置する

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

Read the rest of this entry »

今回は以前紹グリッドのサンプルで簡単に紹介したコンボボックスを取り上げます。コンボボックスはHTMLフォームのセレクトボックスのような選択式のフォームを生成します。ExtJSのコンボボックスでは、項目のデータをストアから利用します。今回はグリッドの回で使ったサンプルのストアとデータを利用しています。

ComboBoxの基本

グリッド関連の記事

• ExtJSで楽しくRIA業務アプリ開発のgridの記事一覧

フォーム関連の過去の記事はこちらからです。

• ExtJS入門　ExtJSのフォームについて（基本編）
• ExtJS入門32　フォームパネルとフィールド(基本編)
• ExtJS入門33 Columnレイアウトのフォーム

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

Read the rest of this entry »

前回のサンプルのおまけです。前回のサンプルコードExt.DataViewを使ってTwitter Search APIの情報を表示していました。今回はダブルクリックイベントとホバリング時のCSSクラスの設定を行ってもう少し使えるアプリっぽく修正しました。

DataViewのホバリング設定

関連の記事はこちらからです。

• ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
• ExJS入門30　Twitter Search APIを使ったグリッドパネル
• ExtJS入門　JSONP経由でTwitterの情報をDataViewに表示する

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

Read the rest of this entry »

JSONPでTwitter APIを利用する小ネタの紹介です。前回まではグリッドのデータソースとしてJSONPで色々なAPIを利用していました。APIから取得したデータはストアに保存されています。そのためグリッド以外にも利用することができます。今回は前回と同じTwitter Search APIをデータソースにして表示をグリッドパネルからデータビューに変更してみます。

Twitter API をDataViewの表示

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

• 第5回ExtJS勉強会＠名古屋 2/25　パネル内のエレメントを作成する
• ExJS入門29　JSONPを使ってYouTube Data APIをグリッドパネルに読み込む
• ExJS入門30　Twitter Search APIを使ったグリッドパネル
• ExJS入門31 GridViewでグリッドの各行の背景色を変更する

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

Read the rest of this entry »

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

一時間以内のtweetだけ背景色を緑に

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

• 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のアップデートをグリッドに読み込んでみます。

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をグリッドパネルに読み込む

リファレンスはこちらから
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にも対応しているため、利用が簡単です。

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入門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を使ったグリッドのサンプルを紹介します。

ux Grid RowEditor

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

Ext: User Extensions and Plugins

また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 »