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

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

今回は以前紹グリッドのサンプルで簡単に紹介したコンボボックスを取り上げます。コンボボックスは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 »

フォームのレイアウトについてフォームパネルのではデフォルトで’form’レイアウトが設定されています。’form’レイアウトでは、fieldLabelを表示するなどフォームフィールドを設置に最適なレイアウトを提供してくれます。しかし複雑なフォームの配置ができません。フォームパネルのレイアウトコンフィグを変更することでより自由なレイアウトでフィールドを配置する方法を紹介します。
今回はcolumnレイアウトの紹介です。

Columnレイアウトのフォーム

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

• ExtJS入門　ExtJSのフォームについて（基本編）
• ExtJS入門32　フォームパネルとフィールド(基本編)

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

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

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

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 »

そろそろグリッドに関してもネタがなくなってきましたが、今回はグリッドにチェックボックスを追加するサンプルを紹介します。今回は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 »

グリッド関連4回目は、セレクションモデルを設定して、行の選択状態を取得する簡単なサンプルです。
ExtJSのグリッドの様々なセレクションモデルを設定して、行の選択の仕方を指定します。今回は一番基本となる、単一の行を選択するセレクションモデルを設定して、その行の情報を取り出すようにします。以前に紹介したグリッドのサンプルではセレクションモデルが明示的に設定されていないためグリッドのデフォルトのセレクションモデルが自動的に設定されていました。実際に試してもらうと分かりやすいのですが、Ctrlもしくはcommandキーを押しながらクリックすると複数選択ができます。
今回のサンプルではセレクションモデルを独自に設定して、一行だけを選択するようにします。

セレクションモデル

Read the rest of this entry »