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で指定します。