学习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 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:"取消"}]

             }）
    }）