Extjs4.0——panel

在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标题',