面闆Panel是ExtJS控件的基礎,很進階控件都是在面闆的基礎上擴充的,還有其它大多數控件也都直接或間接有關系。應用程式的界面一般情況下是由一個一個的面闆通過不同組織方式形成。
面闆由以下幾個部分組成,一個頂部工具欄、一個底部工具欄、面闆頭部、面闆尾部、面闆主區域幾個部分元件。面闆類中還内置了面闆展開、關閉等功能,并 提供一系列可重用的工具按鈕使得我們可以輕松實作自定義的行為,面闆可以放入其它任何容器中,面闆本身是一個容器,他裡面又可以包含各種其它元件。
面闆的類名為Ext.Panel,其xtype為panel,下面的代碼可以顯示出面闆的各個組成部分:
Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", //DIV的ID title:"面闆頭部header", //标題 width:300, height:200, html:'<h1>面闆主區域</h1>', tbar:[{text:'頂部工具欄topToolbar'}], bbar:[{text:'底部工具欄bottomToolbar'}], buttons:[{text:"按鈕位于footer"}] }); });

一般情況下,頂部工具欄或底部工具欄隻需要一個,而面闆中一般也很少直接包含按鈕,一般會把面闆上的按鈕直接放到工具欄上面。比如下面的代碼:
Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello",//DIV的ID title:"hello", //标題 width:300, height:200, html:'<h1>Hello,HelloWorld</h1>', tbar:[{pressed:true,text:'重新整理'}] }); });