Borderレイアウト
Borderレイアウトは図2のように、ペインの位置を上下左右などで指定して配置するタイプのレイアウトです(サンプルはhttp://localhost/index/borderで表示されます)。
このレイアウトで使うペインContentPaneはZend_DojoビューヘルパのメソッドcontentPaneで作成することができます。
...
//(1)インスタンスの作成
$border = $this->borderContainer();
$border->captureStart('border',
array(),
array('style' => 'width: 400px; height: 200px;',)
);
//(2) 1つ目のペインの追加
$this->contentPane()->captureStart('border1',
array('region'=>'left'));
echo 'data1';
echo $this->contentPane()->captureEnd('border1');
...
//(3) 全体の出力
echo $border->captureEnd('border');
...
Borderレイアウトでは、ContentPaneクラスのペインを利用します(実はAccordionレイアウト以外のレイアウトではContentPaneを使います)。このリスト2の(2)でペインの作成を行っていますが、ここでDijitパラメータとしてこのペインをどこに配置するかを指定しています。
ContentPaneが利用するDijitパラメータは「region」で、ここでペインを配置する位置をtop、bottom、left、center、rightのいずれかで指定します。
Stackレイアウト
Stackレイアウトはすべてのペインを重ねて表示するレイアウトです。Stackレイアウトが他のレイアウトと違う点として、重なっているペインを切り替えるための手段が標準ではHTML上のオブジェクトとして準備されないことがあります。つまり、Stackレイアウトを利用する場合には、JavaScriptを利用してペインの切り替えを行う必要があります。
図3の例では、ボタンを利用してペインの切り替えを行うようにしています(サンプルはhttp://localhost/index/stackで表示されます)。
StackレイアウトのインスタンスはZend_DojoビューヘルパのstackContainerメソッドで作成します。
...
//(1)インスタンスの作成
$stack = $this->stackContainer();
$stack->captureStart('stack',
array(),
array('style' => 'width: 400px; height: 200px;',)
);
//(2) パネルの追加
$this->contentPane()->captureStart('stack1',
array());
echo 'data1';
echo $this->contentPane()->captureEnd('stack1');
...
//(3) 全体の出力
echo $stack->captureEnd('stack');
//(4) ペインを切り替えるためのボタン
echo $this->button('prev', '前',
array('onClick' => 'dijit.byId("stack").back()'));
echo $this->button('next', '次',
array('onClick' => 'dijit.byId("stack").forward()'));
...
リスト3の(1)(2)を見て分かるとおり、StackレイアウトへのDijitオプションは利用しません。また、ペインを切り替えるためにはStackレイアウトのJavaScriptのbackメソッドとforwardメソッドを呼び出す必要があるのですが、(4)でその切り替えのためのボタンを設置しています。
Tabレイアウト
Tabレイアウトはペインを重ねて配置し、表示するペインをタブで切り替えられるようにしてあるレイアウトです(サンプルはhttp://localhost/index/tabで表示されます)。
StackレイアウトのインスタンスはZend_DojoビューヘルパのtabContainerメソッドで作成します。
...
//(1)インスタンスの作成
$tab = $this->tabContainer();
$tab->captureStart('tab',
array(),
array('style' => 'width: 400px; height: 200px;',)
);
//(2) ペインの追加
$this->contentPane()->captureStart('tab1',
array('title' => 'Tab1'));
echo 'data1';
echo $this->contentPane()->captureEnd('tab1');
...
//(3) 全体の出力
echo $tab->captureEnd('tab');
...
それぞれのペインのタイトルはDijitパラメータのtitleで指定します。



