学习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:"密码"}],

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：指定包含面板中按钮的配置数组。

四、应用举例

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

})
    })