引き続いて、第3章を読みます。

Upgraded Layouts

レイアウトは最も重要なコンポーネントである。 なぜならコンテナーがどのようにまとめるかを定義するから。

Ext JS 4 layouts

レイアウトはExt JS 4で大幅に進化したよ。

レイアウトはExt JS 2で導入され、 パフォーマンスはよかったけれどフレキシビリティに欠けていた。 Ext JS 3では、フレキシビリティを改善したけどスピードが落ちた。 Ext JS 4では、過去のどのバージョンよりも早くてフレキシブルだ。

ContainerレイアウトとComponentレイアウトの二つのタイプを導入した。

Componentレイアウト

コンポーネントのHTMLエレメントを管理する。 Borderレイアウト、Boxレイアウト、Fitレイアウトなど

Containerレイアウト

親コンテナーとコンテナーの子のサイズを管理する。 Dockレイアウト、Toolbarレイアウト、Fieldレイアウト、TriggerFieldレイアウトなど

Ext JS 3のAutoLayoutはContainerLayoutに置き換えられる。 ContainerLayoutはすべてのレイアウトのベースベースクラス。

Formレイアウトは、Fieldレイアウトによって置き換えられる。

Container layouts

Componentレイアウトの前に既存のContainerレイアウトを見る。 内容的には Ext JS 4実践開発ガイドで説明されていることと大差ない。割愛。

Component layouts

Dock layout

DockLayoutは新しいレイアウトエンジン。 ほとんどのパネルコンポーネントに適用されている。 パネルヘッダーやツールバーをパネルに配置する時に使われている。

P120で

When we analyze the generated code for Ext JS 4 Panel.

とあるのは

When we analyze the generated code for Ext JS 3 Panel.

の間違いと思われる。

同様にP121の

As you can see, the Ext JS 4 Panel has almost no flexibility,….

も

As you can see, the Ext JS 3 Panel has almost no flexibility,….

の間違い。

ツールバーは、tbar, bbar, fbar の指定ができたが、 それに加えて、rbar, lbar の指定で左右にドッキングすることもできる。 その他に、dockedItemsのメンバーとして指定することも可能。

Ext JS 4 では、パネルヘッダーやツールバーはコンポーネントであり、 dockedItems としてパネルにドッキングする。 dockedItems でドッキングしたものはDockLayoutになると考えて良い。 だから、Ext JS 3 では上部に固定だったパネルヘッダーも上下左右どこにでも配置できるようになった。

ここには書いていないが、dockedItemsコンフィグでツールバーを指定するときには、 bbarもfbarも dock: ‘bottom’ と同じになってしまう。 fbarな形式(配置したボタンが盛り上がっている)のツールバーをdockedItemsコンフィグで指定するときには、

ui: ‘footer’

をつけるとよい。

Tool layout

ヘッダーのツールボタンは、3のときとは違って4ではコンポーネントである。 toolsコンフィグに配列で指定する。 typeでツールのタイプを指定し、handlerでその振る舞いを指定する。 ヘッダーのtoolsコンフィグに適用されるのがToolLayoutってことか。

Field layout

Ext JS 4 では FormLayout はさぽーとされない、 かわりにこのFieldLayoutが導入された。

3の時には、バリデーションのエラーを表示するアイコンのためのスペースを確保しておく必要があったが、 4では、そこはフレームワークが自動的にやってくれるので、その必要はなくなった。

TriggerField layout

これもほぼFieldLayoutと同じ。 3の時には、バリデーションのエラーを表示するアイコンのためのスペースを確保しておく必要があったが、 4では、そこはフレームワークが自動的にやってくれるので、その必要はなくなった。