PanelやWindowで、コンストラクタのパラメーターとしてタイトルとボディーを渡すのではなく、HTMLで定義したいなぁ、と言う場合の方法。
大半のケースがこっちだと思うんだけれども。
テンプレートエンジン系で、HTMLとして吐き出して、それをExtJSで装飾。
その方がスマートじゃない？非同期で取って来るパターンも多いけど。
* Script側elでElementのidを指定する。
後はrenderするだけ。
<script type="text/javascript">
$(function(){
var pan1 = new Ext.Panel({
el: "pan-1",
width: 320,
height: 120,
collapsible: true,
titleCollapse: true,
collapsible: true,
autoShow: true,
});
var pan2 = new Ext.Panel({
el: "pan-2",
width: 320,
height: 120,
collapsed: true,
collapsible: true,
titleCollapse: true,
hideCollapseTool: true,
autoShow: true
});
pan1.render();
pan2.render();
});
</script>
* HTML側x-panel-header、x-panel-bodyを指定。
x-hiddenは、必須だからね。visibleをtrueにするまで隠すために。
これを入れないと、画面表示時に、定義部分がそのまま見えちゃう。
scriptのautoShowが、このhiddenを自動的に解除するフラグ。
<div id="pan-1" class="x-hidden">
<div class="x-panel-header">タイトル</div>
<div class="x-panel-body">
メッセージ<br/>メッセージ
</div>
</div>
<div id="pan-2" class="x-hidden">
<div class="x-panel-header">タイトル2</div>
<div class="x-panel-body">
メッセージ2<br/>メッセージ2
</div>
</div>
Ext.Panelに渡している値の説明をちょっとだけ。
collapsibleは、パネルを閉じるトグルボタンが表示され、パネルの開閉が可能になる。
titleCollapseは、タイトル部分を押すと、パネルの開閉が出来るようにする場合true。
hideCollapseToolは、トグルボタンを隠す。
titleCollapseをtrueにした場合、hideCollapseToolはfalseにしろ、
ってAPIドキュメントにはあるけれど、パッと見畳めるように見えなくなってしまうので、
表示しっぱなしの方が良いと思う。
PR
