- /*
- Ext.Panel主要配置表:
- animCollapse Boolean 設置面板摺疊展開是否顯示動畫,Ext.Fx可用默認true,否則false
- applyTo Mixed 面板定位
- autoDestroy Boolean 是否自動銷燬從容器中移除組件(默認true)
- autoHeight Boolean 是否自動高度(默認false)
- autoLoad Object/String/Function 設置面板自動加載的url
- autoScroll Boolean 設置是否自動加載滾動條(默認false自動加滾動條)
- autoShow Boolean 是否移除組件的隱藏樣式(默認flase)
- autoWidth Boolean 是否自動寬度(默認false)
- baseCls String 面板的基本樣式類(默認x-panel)
- bbar Object/Array 設置面板底端工具欄,可是Ext.Toolbar,工具欄配置對象,button的數組
- bodyBorder Boolean 是否顯示面板體內部邊框(默認true,在border=true生效)
- bodyStyle String/Object/Function 應用於面板體的自定義樣式(默認null)
- border Boolean 是否顯示面板體邊框(默認true,2px)
- buttonAlign String 設置面板底部按鈕對齊方式(默認right,可爲left,center)
- buttons Arry 設置面板底部按鈕配置數組
- collapseFirst Boolean 該項決定展開收縮按鈕的位置(默認true)
- collapsed Boolean 設置面板在第一次渲染時是否處於收縮狀態(默認true)
- collapsible Boolean 是否允許面板展開收縮(默認false)
- contentEI String 設置面板的內容元素,可爲頁面元素id,已存在的HTML節點
- defaultType String 面板中元素的默認類型(默認panel)
- defaults Object 應用到面板容器中所有元素配置對象,如:defaults:{bodyStyle:'padding:15px'}
- floating Boolean 設置面板是否可浮動(默認true,會導致面板顯示負偏移,位置要明確設置!)
- footer Boolean 設置是否創建面板底部元素(默認true)
- frame Boolean 設置是否渲染面板
- header Boolean 設置是否創建頭部(默認true)
- headerAsText Boolean 是否在面板header中顯示title(默認true)
- height Number 面板高度(默認auto)
- hideBorders Boolean true隱藏面板中所有元素的邊框,false據組件具體配置
- hideCollapseTool Boolean 設置當collapsible爲true是,是否顯示展開收縮按鈕
- html String/Object 設置面板元素內容爲HTML片段或DomHelper生成內容
- items Mixed 單獨一個子組件或子組件數組
- layout String 面板佈局類型(默認Ext.layout.ContainerLayout佈局)
- layoutConfig Object 這個配置對象包含被選佈局的配置項
- maskDisabled Boolean 設置當面板不可使用時是否遮罩面目(默認true)
- shadow Boolean/String 設置是否在面板後顯示陰影(默認true)
- shadowOffset Number 設置面板陰影偏移量(默認4)
- tbar Object/Array 設置面板頂端工具欄,可是Ext.Toolbar,工具欄配置對象,button配置對象數組,面板
- 渲染後只能通過getTopToolbar方法訪問該工具欄
- title String 顯示在面板的頭部標題信息
- titleCollapse Boolean 設置是否允許單擊面板頭部進行展開收縮(默認false)
- tools Array 面板頭部工具按鈕配置對象數組
- width Number 面板寬度(默認auto)
-
- tools配置表:
- id String 必選
- handler Function 單擊按鈕後出發的處理函數
- scope Object 處理函數執行範圍
- qtip String/Object 爲按鈕指定提示信息
- hidden Boolean 設置初次渲染是否隱藏
- on Object 爲按鈕配置事件監聽
-
- tools配置項id對應不同按鈕
- */
- <mce:script
type="text/javascript"><!--
- Ext.onReady(function(){
- var config
= {
- title:'面板頭部(hear)',
- tbar:['頂端工具欄(top toolbars)'],
- bbar:['底端工具欄(bottom toolbars)'],
- height:200,
- width:300,
- frame:true,
- renderTo:'panel',
- bodyStyle:'background-color:#ffffff',
- html:'
面板體(body)',
- tools:[
- {id:'toggle'},
- {id:'close'},
- {id:'maximize'}
- ],
- buttons:[
- new Ext.Button({
- text:'面板底部(footer)'
- })
- ]
- }
-
- new Ext.Panel(config);
- });
-
1.通過autoLoad加載遠程頁面
- <mce:script
type="text/javascript"><!--
- /*
- 使用autoLoad加載遠程頁面
- */
-
- Ext.onReady(function(){
- var config
= {
- title:'面板加載遠程頁面',
- height:150,
- width:250,
- frame:true,
- autoScroll:true,
- collapsible:true,
//允許展開和收縮
- applyTo:'panel',
- autoLoad:{url:'page1.html'},
//自動加載面板體的鏈接
- bodyStyle:'background-color:#ffffff'
- }
-
- var panel
= new Ext.Panel(config);
- });
-
- <mce:script
type="text/javascript"><!--
- /*
- contentEI加載本地資源
- */
-
- Ext.onReady(function(){
- var config
= {
- title:'面板加載本地數據',
- height:150,
- width:250,
- frame:true,
- collapsible:true,
- autoScroll:true,
- autoHeight:false,
- //autoHeight:true,
- renderTo:'panel',
- contentEl:'localElement',
//要加載的本地資源的id,contentEl中l爲小寫的L!
- bodyStyle:'background-color:#ffffff'
- }
-
- new Ext.Panel(config);
- });
-
- <table
id='localElement'>
- <tr>
- <td
colspan="2">遠程頁面</td>
- </tr>
- <tr>
- <td
width="60">編號</td>
- <td
width="80">姓名</td>
- </tr>
- <tr>
- <td>編號</td>
- <td>姓名</td>
- </tr>
- <tr>
- <td>編號</td>
- <td>姓名</td>
- </tr>
- <tr>
- <td>編號</td>
- <td>姓名</td>
- </tr>
- <tr>
- <td>編號</td>
- <td>姓名</td>
- </tr>
- </table>
- <mce:script
type="text/javascript"><!--
- var htmlArray
= [
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '',
- '
'html配置自定義面板內容 編號 姓名 編號 姓名 編號 姓名 編號 姓名 編號 姓名 編號 姓名 編號 姓名 編號 姓名 編號 姓名 - ];
-
- var config
= {
- title:'使用html配置自定義面板內容',
//panel標題
- height:150,
//panel高
- width:250,
//panel寬
- frame:true,
//渲染
- collapsible:true,
//允許展開收縮
- autoScroll:true,
//允許顯示滾動條
- autoHeight:false,
//使用固定高度
- //autoHeight:true, //自適應高度
- renderTo:'panel',
//定位
- html:htmlArray.join(''),
//panel中顯示的自定義html代碼
- bodyStyle:'background-color:#ffffff'
//panel背景色
- }
-
- var panel
= new Ext.Panel(config);
-
- <mce:script
type="text/javascript"><!--
- /*
- 使用items配置在面板中添加組件
- */
-
- /*使用items配置添加單一組件實例*/
- Ext.onReady(function(){
- var config
= {
- headler:true,
//面板頭部
- title:'日曆',
//面板標題
- frame:true,
//渲染
- collapsible:true,
//允許伸展收縮
- autoHeight:true,
//允許自動高度
- width:189,
//面板固寬度
- renderTo:'panel',
//面板定位
- items:new Ext.DatePicker()
//向面板中添加一日期組件
- }
-
- var panel
= new Ext.Panel(config);
- });
-
- /*使用items配置添加多個組件實例*/
- Ext.onReady(function(){
- var config
= {
- headler:true,
- title:'使用items配置添加多個組件',
- frame:true,
- height:200,
- width:250,
- renderTo:'panel',
- //設置所有面板的默認屬性
- defaults:{
- bodyStyle:'background-color:#ffffff',
//背景色
- height:80,
//面板固定高度
- collapsible:true,
//允許伸展收縮
- autoScroll:true
//自動顯示滾動條
- },
- //面板元素數組
- items:[
- //嵌套面板一
- new Ext.Panel({
- title:'嵌套面板一',
- contentEl:'localElement'
//加載本地數據
- }),
- new Ext.Panel({
- title:'嵌套面板而',
- autoLoad:'page1.html'
//加載遠程頁面(失敗)
- })
- ]
- }
-
- var panel
= new Ext.Panel(config);
- });