Ext 學習(3)---ExtPanel

 

Ext Panel面板

Ext.panel.Panel是在佈局中常用的容器組件：

• Panel常用的配置屬性如下：

• title:Panel的標題文字
• width:Panel的寬度
• height:Panel的高度
• closable:是否可以關閉
• collapsible:是否可以收縮
• collapseDirection:收縮的方向，可以取如下值：left right top bottom
• bodyCls:面板上內容所用的樣式
• html:面板內容
• items:Panel中的組件數組
• autoScroll:是否自動出現滾動條
• layout:佈局方式，有如下取值：Auto card fit hbox vbox anchor table
• border:是否顯示邊框
• frame:True to apply a frame to the panel.
• tools:工具按鈕，和關閉按鈕在一起顯示
• listeners:配置各種事件，如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');
				}
			}
		});
	});	

運行效果如下：