一：描述

皮膚Panel是ExtJS控制元件的基礎，很多高階控制元件都是在皮膚的基礎上擴充套件的，還有其它大多數控制元件也都直接或間接與它有關係。應用程式的介面一般情況下是由一個一個的皮膚透過不同組織方式來形成。
皮膚由以下幾個部分組成，一個頂部工具欄(tbar)、一個底部工具欄(bbar)、皮膚頭部(header)、皮膚尾部(bottom)、皮膚主區域(body)幾個部分組成。皮膚類中還內建了皮膚展開、關閉等功能，
並提供一系列可重用的工具按鈕使得我們可以輕鬆實現自定義的行為，皮膚可以放入其它任何容器中，皮膚本身是一個容器，他裡面又可以包含各種其它元件。

皮膚Panel主要有下面幾個特點：

1）、皮膚可以理解成應用程式中的一個介面塊，這個塊可以大，也可以小，這一個塊包含了特定的樣式資訊；

2）、皮膚Panel繼承自Container類，因此，皮膚是一個視覺化容器元件；也是其它大多數視覺化控制元件如TabPanel、Window、TreePanel的基類；

3）、皮膚中即可包括其它元素元件，也可以包含特定html程式碼片段，可以在程式中動態更新皮膚中的內容；

4）、皮膚由固定的5個部分組成，除了body部份以外，其它部分都不是必須的。

如果要在皮膚中放置Ext元件或控制元件元素，則可以透過皮膚的items屬性來指定，這個屬性的值可以是一個陣列，表示皮膚中有很多子元素，
也可以是一個物件，表示皮膚中只定義一個子元素。當皮膚物件建立以後，可以透過皮膚容器的add、insert來動態往皮膚中增加子元素，用remove方法來在皮膚動態刪除子元素。

二：Config

1.bbar : Object/Ojbect[]

配置底部工具類的簡單方法。

bbar:[{
xtype : 'button',
text : 'Button 1'
}]

===========>

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]

2.buttons : Object/Object

配置panel底部button的簡單方法

buttons : [
{text:'Button 1'}
]

=====>

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]

4.dockedItems

一個或多個對接元件新增到panel. 可以新增到panel的上下左右的位置，主要用於工具欄和tab欄。

5.formBind

6.icon
指定一個圖片路徑，作為標題左側的icon

7.iconClass

Ext.js4.2.1 Ext.panel.Panel

相關文章