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 »

今回はフォームのVTypeに独自のバリデーションを設定して、フォームの検証を行うサンプルです。

カスタムのVTypeを定義してフォームを検証する。

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

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

Read the rest of this entry »

今回はExtJSのフォーム（フィールド）をHTMLのノーマルなインプットのようにform要素に仕込むサンプルを紹介します。

HTMLの標準フォームにExt.form.Textfieldをレンダリング

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

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

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

Read the rest of this entry »

今回はtableレイアウトのフォームの簡単な紹介です。基本的な部分はcolumnレイアウトのときと同じです。tableレイアウトではcolspan,rowspanを使ってレイアウトを設定します。ExtJS入門33 Columnレイアウトのフォーム

Tableレイアウトのフォーム

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

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

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

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 »

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

エディタブル･グリッド

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 »