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

})
})