logo

サイト内検索
ココログ最強検索 by 暴想

最近のトラックバック

無料ブログはココログ

トップページ | Struts関連 »

ext.jsについて

Ext JSについて

GwtExt/ExtGWTを使うにはExt JSの知識が多少なりとも必要になります。そこでExt JSの基本的な話を少々書きます。Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ(フレームワーク)です。画面デザインの観点からいうと画面を構成する部品単位にすでにCSSも含めて作成済みのものが使用できることから、画面設計をより手っ取り早く行うことが出来ます。

Ext Jsの部品のサンプル
http://extjs.com/products/extjs/

コンフィグオプションによるコンポーネントの生成

Ext Jsの特徴としてコンフィグオプションがあげられます。コンポーネントの属性を設定するのに、GWTの場合は主にsetterを使用して設定しますが、Ext Jsではコンポーネント生成時にコンストラクターにコンフィグオプションという文字列(JSONだと思う)を与えることで基本的に(多分)すべての属性を決めることが出来ます。
コンフィグオプションは以下のように{}でオブジェクトひとつを表し、属性は 属性名:値 という書式になります。また配列は[]を使用します。(つまりJSON書式)
{labelWidth: 75,
   width: 350,
   title: 'FormPanel',
   layout: 'form',
   xtype: 'form',
   defaultType: 'textfield',
   buttons: [
     {text: 'Save'
     },
     {text: 'Cancel'
     }
   ],
   items: [
     {fieldLabel: 'First Name',
       name: 'first',
       allowBlank: false
     },
     {fieldLabel: 'Last Name',
       name: 'last'
     },
     {fieldLabel: 'Company',
       name: 'company'
     },
     {fieldLabel: 'Email',
       name: 'email',
       vtype: 'email'
     }
   ]
}
ここでitemsという属性はこのコンポーネントに含まれる他のコンポーネントの配列を意味します。したがってコンポーネントの入れ子になった構造もすべて一つの文字列だけですべて表現できる事を意味しています。上記コンフィグオプションは以下のような四つのtextfieldと二つのbuttonを含むFormPanelのインスタンスを生成します。

Ext01_2

xtype

xtype属性はExt Jsのコンポーネントのクラスを決定する重要な属性です。xtypeによりインスタンスのクラス自体も決定できるという事は言ってみればコンフィグオプションだけですべてを表現できる事を意味しています。xtypeとクラスの関係はExt JsのApiドキュメントのComponentの項にあります。
http://docs.ext-japan.org/docs/

layout

Panelクラスのlayout属性を設定することで様々な機能を持ったパネルのコンポーネントを作ることができます。

レイアウトの例


form layout

layout: 'form'
xtype: 'panel'またはxtype'form'
子のコンポーネントが縦に並ぶlayoutです。GWTのVerticalPanelに相当します。また、Ext.formパッケージのコンポーネントを貼り付けるにはform layoutが必要です。
xtype'form'の場合は、クラスがFormPanelとなり、submit機能等が付加されます。

column layout

layout: 'column'
xtype: 'panel'
子のコンポーネントを横に並べるlayoutです。基本的に貼り付ける各コンポーネントの位置はそれぞれのコンポーネントのcolumnWidth属性で決定します。

border layout

layout: 'border'
xtype: 'panel'
 Ext02_3

東西南北+中心のエリアを定義できるパネルです。GWTのDockPanelに相当します。しかも、オプションでボーダーをドラッグして大きさを配分を変化させる機能を付加することが出来ます。

TabPanel

layout: 'card'
xtype: 'tabpanel'
Ext03
タブによる選択を可能にするパネルです。

AcordionLayout

layout: 'acordion'
xtype: 'panel'
複数のパネルを重ねてそのうちひとつのパネルを選択可能にするレイアウトです。

GridPanel

layout: 'grid'
xtype: 'grid'
Ext04
データ表形式のパネル。元データとの連携機能も実装された強力なパネル。

TableLayout

layout: 'table'
xtype: 'panel'
Ext05
HTMLのテーブル構造を元にレイアウトできるパネルです。

トップページ | Struts関連 »

D-Rex」カテゴリの記事

ext.js」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1482716/39211850

この記事へのトラックバック一覧です: ext.jsについて:

トップページ | Struts関連 »