フィールドをレイアウトするのは？

ども、小堤です。

さて、ちょっとコードばっかり書いてて、ちょっとつかれたのでブログを。めずらしい・・。

みなさんは、Ext JSのフィールドをレイアウトする場合、何にレイアウトしますか？Ext.form.FormPanelですか？Ext.Panelですか？サンプルは、FormPanelにレイアウトしていることが多いですね。これは、FormPanelのアイテムにフィールドを設定すると、フォームレイアウトでレイアウトされるからです。

では、Ext.Panelにレイアウトしてはいけないのでしょうか？

そんなことはありません。

Ext.Panelにレイアウトしてもかまいません。しかし、その場合、レイアウトも指定しないと、FormPanelに配置したようにはなりません。

layout: ‘form’

としてあげる必要があります。

さて、ここまでは超初心者でも知ってる話ですんで、どーでもいんですが。

注意すべき点があります。

Ext.Panelの初期xtypeはExt.Panelであるということと、レイアウトは、containerレイアウトである。という点です。

何が言いたいかというと。

Ext.Panel内のアイテムで次々レイアウトを切って、フィールドをぶっこんでいくと、全部パネルでレイアウトされるんですね。

そうした場合、まず、ボーダー引かれます。うざいです。背景色も指定されてしまいます。結論から言うと、大枠は、Ext.Panelでよいのですが、その中にcolumレイアウトなどをいれたりしてレイアウトを行う場合、必ずExt.Containerクラスをxtypeで指定するようにします。

こうすることで、フィールドのレンダリングスピードが向上します。

layout: ‘column’,
items: [{
xtype: ‘container’,
columnWidth: .5,
items: [{
xtype: ‘textfield’
}]
},{
xtype: ‘container’,
columnWidth: .5,
items: [{
xtype: ‘textfield’
}]
}]

ざっくりかくと上記のようになります。（インデントきいてませんがｗ）
Ext JSのレイアウトは、コンテナーに対して、ネストしながらレイアウトを行っていきますが、この枠がすべてExt.PanelになるかExt.Containerになるかで、パフォーマンスは結構違います。
また、Ext.Containerの場合、bodyが存在しないので、背景がきれいに透けます。なので、大枠で背景を指定して、ちゃんと透けてくれるわけですね。
余計なボーダー消したりとかのコードも必要ないですし、パフォーマンスもよいですし。

ホントは、もうちょいいろいろあるんですが、簡単なテクニックとして、レイアウトするときは、だまってExt.Containerを指定する。覚えておいておくといいですよ。