快捷導(dǎo)航

學(xué)習(xí)ExtJS Panel常用方法

更新時(shí)間：2009年10月07日 22:43:50 作者：

ExtJS Panel常用方法，需要的朋友可以參考下。

一、屬性

frame：布爾類型true 或 false ，為true時(shí)表示邊框?yàn)閳A角且具有背景色，取false則反之。

xtype：在EXTJS的可視化組件部署中的一種機(jī)制，即通過指定xtype的值，來告訴容量如何初始化所包含的級(jí)件，如xtype:"textfiled",表示使用Ext.form.TextFile來進(jìn)行初始化當(dāng)前組件。

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的默認(rèn)值，如：

 defaults:{xtype:"textfield",width:180},

 items:[{fieldLabel:"帳號(hào)"},{fieldLabel:"密碼"}],

二、方法
add(Ext.Component/Object_component)：添加一個(gè)組件到面板中，運(yùn)行時(shí)方法。

addButton( String/Object config, Function handler, Object scope ) :添加一個(gè)按鈕到面板中，設(shè)計(jì)時(shí)方法（對(duì)象在未構(gòu)造之前調(diào)用）。

_panel.addButton({text:"確定"}); //form按默認(rèn)寬度自適應(yīng)創(chuàng)建

_panel.addButton(new Ext.Button({text:"取消",minWidth:200}));

三、事件

render：當(dāng)前對(duì)象被構(gòu)造后觸發(fā)（設(shè)計(jì)時(shí)事件）。

renderto（構(gòu)造參數(shù)）：將當(dāng)前對(duì)象所生成的HTML對(duì)象存放在指定的對(duì)象中（運(yùn)時(shí)時(shí)事件）。

兩者不能同進(jìn)使用，否則render不起作用。

三、構(gòu)造參數(shù)

items：指定包含在面板中組件的配置數(shù)組如textField。

buttons：指定包含面板中按鈕的配置數(shù)組。

四、應(yīng)用舉例

  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:"帳號(hào)"},{fieldLabel:"密碼"}],
             buttons:[{text:"確定"},{text:"取消"}]

             })
    })

您可能感興趣的文章: