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 »

エディタブルグリッドのサンプルその3になります。
今回は色々なグリッドを編集する際のエディタにテキストフィールド以外のエディタを指定します。このサンプルではTextField, DateField, NumberField.ComboBoxを使います。

ComboBoxをエディターに設定

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

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

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

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.ComboBoxクラス
http://extdocs.xenophy.com/?class=Ext.form.ComboBox

Read the rest of this entry »

エディタブル・グリッドはグリッド上でストアの情報が編集できるグリッドです。前回のサンプルでは編集を行ったあとのストアの情報をどこにも保存していませんでした。今回はExt.Ajaxクラスを使って、編集後のストアのデータをサーバーへ送信するサンプルを紹介します。

Ajaxで保存

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

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

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

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

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 »