Welcome 微信登录

首页 / 脚本样式 / JavaScript / 学习ExtJS Panel常用方法

 一、属性frame:布尔类型true 或 false ,为true时表示边框为圆角且具有背景色,取false则反之。xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件。
xtypeClass-------------------------------box Ext.BoxComponentbuttonExt.Buttonbuttongroup Ext.ButtonGroupcolorpalette Ext.ColorPalettecomponentExt.ComponentcontainerExt.ContainercycleExt.CycleButtondataview Ext.DataViewdatepickerExt.DatePickereditorExt.EditoreditorgridExt.grid.EditorGridPanelflashExt.FlashComponentgrid Ext.grid.GridPanellistview Ext.ListViewpanelExt.Panelprogress Ext.ProgressBarpropertygrid Ext.grid.PropertyGridsliderExt.SliderspacerExt.Spacersplitbutton Ext.SplitButtontabpanel Ext.TabPaneltreepanelExt.tree.TreePanelviewport Ext.ViewPortwindowExt.WindowToolbar components---------------------------------------pagingExt.PagingToolbartoolbar Ext.Toolbartbbutton Ext.Toolbar.Button(deprecated; use button)tbfillExt.Toolbar.FilltbitemExt.Toolbar.Itemtbseparator Ext.Toolbar.Separatortbspacer Ext.Toolbar.Spacertbsplit Ext.Toolbar.SplitButton(deprecated; use splitbutton)tbtextExt.Toolbar.TextItemMenu components---------------------------------------menu Ext.menu.MenucolormenuExt.menu.ColorMenudatemenu Ext.menu.DateMenumenubaseitem Ext.menu.BaseItemmenucheckitemExt.menu.CheckItemmenuitem Ext.menu.ItemmenuseparatorExt.menu.Separatormenutextitem Ext.menu.TextItemForm components---------------------------------------form Ext.FormPanelcheckbox Ext.form.CheckboxcheckboxgroupExt.form.CheckboxGroupcomboExt.form.ComboBoxdatefieldExt.form.DateFielddisplayfield Ext.form.DisplayFieldfieldExt.form.Fieldfieldset Ext.form.FieldSethiddenExt.form.HiddenhtmleditorExt.form.HtmlEditorlabelExt.form.Labelnumberfield Ext.form.NumberFieldradioExt.form.RadioradiogroupExt.form.RadioGrouptextarea Ext.form.TextAreatextfieldExt.form.TextFieldtimefieldExt.form.TimeFieldtrigger Ext.form.TriggerFieldChart components---------------------------------------chartExt.chart.Chartbarchart Ext.chart.BarChartcartesianchartExt.chart.CartesianChartcolumnchart Ext.chart.ColumnChartlinechartExt.chart.LineChartpiechart Ext.chart.PieChartStore xtypes---------------------------------------arraystoreExt.data.ArrayStoredirectstore Ext.data.DirectStoregroupingstoreExt.data.GroupingStorejsonstoreExt.data.JsonStoresimplestore Ext.data.SimpleStore (deprecated; use arraystore)storeExt.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:"取消"}]

             })
    })