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

Viewport　ボーダーレイアウトの補足

1.Borderレイアウトの注意点
itemsにregionがcenterのコンポーネントがないとエラーになる。
centerのコンポーネントは他の領域に合わせて拡大される。
splitが指定されたパネルは自動的にマージンが設定される。
パネル内に要素がない場合は、サイズ指定をしないと0になる。

2.Viewportのコンフィグオプション
ExtJSでアプリを作っていく際に、中心になるのはパネルの生成です。そしてExtJSではパネルの生成の際に様々な初期値(コンフィグオプション)を設定しながらパネルを生成していきます。Viewportにも様々なコンフィグオプションが用意されていました。layoutやitemsはViewportで最もよく使用するコンフィグです。

• laytout:Viewportのレイアウト設定。border,fit,accordionなど。
• items:Viewportの内側に設置する要素の設定。複数渡す場合は配列で。layoutとセットで考えた方がよい。多くの場合はExtJSのパネルのオブジェクト(正しくはExt.Componentを継承したコンポーネント)、またはオブジェクトリテラル(オブジェクトリテラルについては次回)。

ViewportのすべてのコンフィグはAPIリファレンスに載っています。http://extdocs.xenophy.com/?class=Ext.Viewport

3.Viewport itemsに設定するパネルのコンフィグオプション
簡単なExtJSのアプリではViewportのコンフィグオプションを多く設置することはなく、layoutとitems程度です。itemsの中にはExtJSのパネルという要素が設置されます。
以下にViewportの中に設置するパネルで頻繁に登場するコンフィグオプションをリストアップしておきます。

• width:幅サイズ設定。数値で指定
• height:縦サイズ設定。数値で指定。
• split:パネルのリサイズ設定。booleanで指定。デフォルトはfalse。Trueに設定することでボーダーをドラッグしてパネルのリサイズが可能になる。
• collapsible:折りたたみ設定。booleanで指定。デフォルトはfalse。Trueに設定するとheaderエレメントに折りたたみボタンが配置され、パネルの折りたたみが可能になる。Titleが設定されていないとheaderエレメントが生成されないので、折りたたみ機能へのインターフェースがなくなり。マウス操作では折りたためなくなります。パネルのheaderコンフィグをTrueにするとタイトルなしのheaderエレメントが生成できます。
• collapseMode:折りたたみモード、折りたたみ時のバーのサイズ
• title:パネルのタイトル。タイトル設定されるとタイトルバーが生成される。折りたたみボタンもheaderエレメントに設置される。
• bodyStyle:パネル内のHTMLへのスタイル「
  」に設定されるスタイル。（パネル内のBODY要素に対するスタイルの設定）。文字列で指定。CSSと同じ書式　例’padding:100px’。
• minSize:スプリット時の最小サイズ設定(ドラッグできる最小のパネルサイズ)。数値で指定する。
• maxSize:スプリット時の最大サイズ設定(ドラッグできる最大のパネルサイズを設定)。数値で指定する。
• margins:マージン設定。文字列で指定　CSSのマージン設定の方法と同じ書式、上右下左の順番で値を設定する。デフォルトでは全てのマージンが0。例.’0 3 0 0′
• cmargins:折りたたみ時マージン設定。設定値はmarginsと同じ形式。

例えばsplitを設定する場合のサンプルは以下のようなコードになります。
スプリット設定する。

var viewport = new Ext.Viewport({
    layout:'border',
    items:[
        new Ext.Panel({
            region:'center',
            title:'Center Panel',
            html:'<p>Center Panel</p>',
            bodyStyle:'padding:100px',
            minSize:200,
        }),
        new Ext.Panel({
            region:'west',
            title:'West Panel',
            html:'<p>West Panel</p>',
            bodyStyle:'padding:100px',
            width:200,
            minSize:200,
            maxSize:250,
            margins:'0 0 0 0',
            split:true
        })
    ]
});

region,titleなどのコンフィグオプションと並列にsplitの設定を記述します。このコンフィグオプションをうまく設定していくだけで、それらしいアプリに見えるようになります。