Ext Panel面板
Ext.panel.Panel是在佈局中常用的容器組件:
-
Panel常用的配置屬性如下:
- Panel的標題文字
- Panel的寬度
- Panel的高度
- 是否可以關閉
- 是否可以收縮
- 收縮的方向,可以取如下值:left right top bottom
- 面板上內容所用的樣式
- 面板內容
- Panel中的組件數組
- 是否自動出現滾動條
- 佈局方式,有如下取值:Auto card fit hbox vbox anchor table
- 是否顯示邊框
- True to apply a frame to the panel.
- 工具按鈕,和關閉按鈕在一起顯示
- 配置各種事件,如click、dblclick
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
title:'Hello',
width:400,
height:200,
closable:true,
collapsible:true,
collapseDirection:'bottom',
html:'Hello world',
bodyCls:'content',
renderTo:Ext.getBody(),
layout:'vbox',
autoScroll: true,
border:2,
frame:false,
items:[{
xtype:'datefield',
fieldLabel:'Start Date'
},{
xtype:'datefield',
fieldLabel:'End Date'
},{
xtype:'datefield',
fieldLabel:'End Date'
},{
xtype:'datefield',
fieldLabel:'End Date'
}],
tools:[{
type:'refresh',
handler:function(){alert('help doc');}
}],
listeners:{
dblclick:{
element:'body',
fn:function(){alert('hello world');}
},
render:function(p){
p.body.mask('loading');
}
}
});
});
運行效果如下: