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