学习ExtJS Panel常用方法

 一、属性frame:布尔类型true 或 false ,为true时表示边框为圆角且具有背景色,取false则反之。xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件。
xtype      Class-------------  ------------------box       Ext.BoxComponentbutton      Ext.Buttonbuttongroup   Ext.ButtonGroupcolorpalette   Ext.ColorPalettecomponent    Ext.Componentcontainer    Ext.Containercycle      Ext.CycleButtondataview     Ext.DataViewdatepicker    Ext.DatePickereditor      Ext.Editoreditorgrid    Ext.grid.EditorGridPanelflash      Ext.FlashComponentgrid       Ext.grid.GridPanellistview     Ext.ListViewpanel      Ext.Panelprogress     Ext.ProgressBarpropertygrid   Ext.grid.PropertyGridslider      Ext.Sliderspacer      Ext.Spacersplitbutton   Ext.SplitButtontabpanel     Ext.TabPaneltreepanel    Ext.tree.TreePanelviewport     Ext.ViewPortwindow      Ext.WindowToolbar components---------------------------------------paging      Ext.PagingToolbartoolbar     Ext.Toolbartbbutton     Ext.Toolbar.Button    (deprecated; use button)tbfill      Ext.Toolbar.Filltbitem      Ext.Toolbar.Itemtbseparator   Ext.Toolbar.Separatortbspacer     Ext.Toolbar.Spacertbsplit     Ext.Toolbar.SplitButton  (deprecated; use splitbutton)tbtext      Ext.Toolbar.TextItemMenu components---------------------------------------menu       Ext.menu.Menucolormenu    Ext.menu.ColorMenudatemenu     Ext.menu.DateMenumenubaseitem   Ext.menu.BaseItemmenucheckitem  Ext.menu.CheckItemmenuitem     Ext.menu.Itemmenuseparator  Ext.menu.Separatormenutextitem   Ext.menu.TextItemForm components---------------------------------------form       Ext.FormPanelcheckbox     Ext.form.Checkboxcheckboxgroup  Ext.form.CheckboxGroupcombo      Ext.form.ComboBoxdatefield    Ext.form.DateFielddisplayfield   Ext.form.DisplayFieldfield      Ext.form.Fieldfieldset     Ext.form.FieldSethidden      Ext.form.Hiddenhtmleditor    Ext.form.HtmlEditorlabel      Ext.form.Labelnumberfield   Ext.form.NumberFieldradio      Ext.form.Radioradiogroup    Ext.form.RadioGrouptextarea     Ext.form.TextAreatextfield    Ext.form.TextFieldtimefield    Ext.form.TimeFieldtrigger     Ext.form.TriggerFieldChart components---------------------------------------chart      Ext.chart.Chartbarchart     Ext.chart.BarChartcartesianchart  Ext.chart.CartesianChartcolumnchart   Ext.chart.ColumnChartlinechart    Ext.chart.LineChartpiechart     Ext.chart.PieChartStore xtypes---------------------------------------arraystore    Ext.data.ArrayStoredirectstore   Ext.data.DirectStoregroupingstore  Ext.data.GroupingStorejsonstore    Ext.data.JsonStoresimplestore   Ext.data.SimpleStore   (deprecated; use arraystore)store      Ext.data.Storexmlstore     Ext.data.XmlStore
defaults:xtypes的默认值,如:
 defaults:{xtype:"textfield",width:180},
 items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],

二、方法
add(Ext.Component/Object_component):添加一个组件到面板中,运行时方法。
addButton( String/Object configFunction handlerObject 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:"取消"}]

             })
    })

JavaScript技术学习ExtJS Panel常用方法,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。