概要 1、Ext.Panel概述 2、面板的五大組成部分 3、面板的特點 4、面板中的內容 5、面板內容動態控制 6、API概述 1、Ext.Panel概述

面板Panel是ExtJS控件的基礎，很多高級控件都是在面板的基礎上擴展的，還有其它大多數控件也都直接或間接與它有關系。應用程序的界面一般情況下是由一個一個的面板通過不同組織方式來形成。

???????????????

2、面板的五大組成部分

面板由以下幾個部分組成，一個頂部工具欄(tbar)、一個底部工具欄(bbar)、面板頭部(header)、面板尾部(bottom)、面板主區域(body)幾個部分組成。面板類中還內置了面板展開、關閉等功能，并提供一系列可重用的工具按鈕使得我們可以輕松實現自定義的行為，面板可以放入其它任何容器中，面板本身是一個容器，他里面又可以包含各種其它組件。

面板的類名為Ext.Panel，其xtype為panel，下面的代碼可以顯示出面板的各個組成部分：

<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: "<h1>面板主區域</h1>",
tbar: [{
text: "頂部工具欄topToolbar"
}],
bbar: [{
text: "底部工具欄bottomToolbar"
}],
buttons: [{
text: "按鈕位于footer"
}]
});
});
</script>

顯示效果如下：

????

一般情況下，頂部工具欄或底部工具欄只需要一個，而面板中一般也很少直接包含按鈕，一般會把面板上的按鈕直接放到工具欄上面。比如下面的代碼：?

<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: "<h1>面板主區域</h1>",
tbar: [{
pressed: true,
text: "刷新"
}]
});
});
</script>

顯示效果如下：

?????????????????????

3、面板的特點

面板Panel主要有下面幾個特點：

1）、面板可以理解成應用程序中的一個界面塊，這個塊可以大，也可以小，這一個塊包含了特定的樣式信息；

2）、面板Panel繼承自Container類，因此，面板是一個可視化容器組件；也是其它大多數可視化控件如TabPanel、Window、TreePanel的基類；

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

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

????????????????????

4、面板中的內容 如果要在面板中放置Ext組件或控件元素，則可以通過面板的items屬性來指定，這個屬性的值可以是一個數組，表示面板中有很多子元素，也可以是一個對象，表示面板中只定義一個子元素。當面板對象創建以后，可以通過面板容器的add、insert來動態往面板中增加子元素，用remove方法來在面板動態刪除子元素。 5、面板內容動態控制

面板中的內容也可以是指定的html片段，此時可以通過配置選項中html屬性來指定。比如下面的代碼：

Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: "<h1><font color='red'>面板主區域</font></h1>",
});
});
</script> 顯示效果如下： 當然，如果面板中的html比較復雜，比如是說是一個動態頁面的內容。此時可以通過在配置選項中設置autoLoad配置選項來指定自動加載指定url中的內容作為面板中顯示的內容。比如下面的代碼： <script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
autoLoad:{
url:"index.html"
}
});
});
</script> 也可以在對象初始化以后，動態更新面板中的html內容，可以通過調用面板的load方法實現，load方法中的參數與autoLoad配置選項中所代表的一樣，代碼如下： <script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo: Ext.getBody()
});
panel.load({
url:"index.jsp",
params:{name:"ljq",pwd:"123"},
scope: this,
discardUrl: false,
nocache: false,
text: "正在加載，請稍候...",
timeout: 30,
scripts: true
});
});
</script> 這時候直接通過面板的body元素來實現面板的內容的更新。比如下面的代碼： panel.body.update("<h1><font color='blue'>這是Ext的面板</font></h1>", true, function(){});

update的第一個參數表示要更新的html字符串，第二個參數表示是否執行字符串中的腳本，第三個參數是指當內容已經更新完成后執行的回調函數。

6、API概述 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的面板Ext.Panel使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。