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