在ExtJS中,Panel继承于Ext.container.Container 类,并且Panel可以通过layout属性进行布局设置,Panel提供了强大灵活的设置,使Web程序界面更加的友好,美观!
如图所示:Panel 包含了bottom 和top 工具栏,并且将header和footer 独立区分而来,Panel也提供了一系列的行为,比如说: collapsible, expandable 和 closable, Panel也可以很容易的布置在其他的Container 或 layout中.
Panel的实例化跟其他对象是一样,可以通过create ,define 等方法实例化一个对象,下面我们将使用Ext.create方法创建一个Panel对象:
var panel = Ext.create('Ext.panel.Panel', {
title : 'panel标题',
floating : true,
shadow : false,
draggable : true,
width : 400,
height : 300,
pageX : 0,
pageY : 0,
collapsible : true,
closable : true ,
closeAction : 'hide',
collapseMode : 'header',
bbar:{xtype:'button',text:'fds'},
tbar:{xtype:'button',text:'fds'},
items : [{
xtype : 'datefield',
fieldLabel : '开始日期'
}],
renderTo : Ext.getBody()
})
}
这段代码中Ext.create的第一个参数指示需要创建的对象(字符串形式),第二个参数是这个对象的一些配置信息:
title : 'panel标题',