学习ExtJS Panel常用方法

ExtJS Panel常用方法，需要的朋友可以参考下。

一、属性

frame：布尔类型true 或 false ，为true时表示边框为圆角且具有背景色，取false则反之。

xtype：在EXTJS的可视化组件部署中的一种机制，即通过指定xtype的值，来告诉容量如何初始化所包含的级件，如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件。

xtype      Class -------------  ------------------ box       Ext.BoxComponent button      Ext.Button buttongroup   Ext.ButtonGroup colorpalette   Ext.ColorPalette component    Ext.Component container    Ext.Container cycle      Ext.CycleButton dataview     Ext.DataView datepicker    Ext.DatePicker editor      Ext.Editor editorgrid    Ext.grid.EditorGridPanel flash      Ext.FlashComponent grid       Ext.grid.GridPanel listview     Ext.ListView panel      Ext.Panel progress     Ext.ProgressBar propertygrid   Ext.grid.PropertyGrid slider      Ext.Slider spacer      Ext.Spacer splitbutton   Ext.SplitButton tabpanel     Ext.TabPanel treepanel    Ext.tree.TreePanel viewport     Ext.ViewPort window      Ext.Window Toolbar components --------------------------------------- paging      Ext.PagingToolbar toolbar     Ext.Toolbar tbbutton     Ext.Toolbar.Button    (deprecated; use button) tbfill      Ext.Toolbar.Fill tbitem      Ext.Toolbar.Item tbseparator   Ext.Toolbar.Separator tbspacer     Ext.Toolbar.Spacer tbsplit     Ext.Toolbar.SplitButton  (deprecated; use splitbutton) tbtext      Ext.Toolbar.TextItem Menu components --------------------------------------- menu       Ext.menu.Menu colormenu    Ext.menu.ColorMenu datemenu     Ext.menu.DateMenu menubaseitem   Ext.menu.BaseItem menucheckitem  Ext.menu.CheckItem menuitem     Ext.menu.Item menuseparator  Ext.menu.Separator menutextitem   Ext.menu.TextItem Form components --------------------------------------- form       Ext.FormPanel checkbox     Ext.form.Checkbox checkboxgroup  Ext.form.CheckboxGroup combo      Ext.form.ComboBox datefield    Ext.form.DateField displayfield   Ext.form.DisplayField field      Ext.form.Field fieldset     Ext.form.FieldSet hidden      Ext.form.Hidden htmleditor    Ext.form.HtmlEditor label      Ext.form.Label numberfield   Ext.form.NumberField radio      Ext.form.Radio radiogroup    Ext.form.RadioGroup textarea     Ext.form.TextArea textfield    Ext.form.TextField timefield    Ext.form.TimeField trigger     Ext.form.TriggerField Chart components --------------------------------------- chart      Ext.chart.Chart barchart     Ext.chart.BarChart cartesianchart  Ext.chart.CartesianChart columnchart   Ext.chart.ColumnChart linechart    Ext.chart.LineChart piechart     Ext.chart.PieChart Store xtypes --------------------------------------- arraystore    Ext.data.ArrayStore directstore   Ext.data.DirectStore groupingstore  Ext.data.GroupingStore jsonstore    Ext.data.JsonStore simplestore   Ext.data.SimpleStore   (deprecated; use arraystore) store      Ext.data.Store xmlstore     Ext.data.XmlStore

defaults：xtypes的默认值，如：

 defaults:{xtype:"textfield",width:180},

 items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],

二、方法
add(Ext.Component/Object_component)：添加一个组件到面板中，运行时方法。

addButton( String/Object config, Function handler, Object scope ) :添加一个按钮到面板中，设计时方法（对象在未构造之前调用）。

_panel.addButton({text:"确定"}); //form按默认宽度自适应创建

_panel.addButton(new Ext.Button({text:"取消",minWidth:200}));

三、事件

render：当前对象被构造后触发（设计时事件）。

renderto（构造参数）：将当前对象所生成的HTML对象存放在指定的对象中（运时时事件）。

两者不能同进使用，否则render不起作用。

三、构造参数

items：指定包含在面板中组件的配置数组如textField。

buttons：指定包含面板中按钮的配置数组。

四、应用举例

  Ext.onReady(function(){
        var _panel = new Ext.Panel({
                title:"人员信息",
                frame:true,
                width:400,
                height:300
            })
            _panel.addButton({text:"确定"});
            _panel.addButton(new Ext.Button({text:"取消",minWidth:200}));
            _panel.render(Ext.getBody());
    }) ;

Ext.onReady(function(){
       var _panel=new Ext.Panel({
             title:"登陆",
             renderTo:Ext.getBody(),
             frame:true,
             width:560,
             height:130,
             layout:"form",
             lableWidth:45,
             defaults:{xtype:"textfield",width:180},
             items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],
             buttons:[{text:"确定"},{text:"取消"}]

             })
    })

以上就是学习ExtJS Panel常用方法的详细内容，更多请关注易知道|edz.cc其它相关文章！