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

2019-11-21 01:06:21

字體：大中小

供稿：網(wǎng)友

一、屬性

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

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

xtype      Class-------------  ------------------box       Ext.BoxComponentbutton      Ext.Buttonbuttongroup   Ext.ButtonGroupcolorpalette   Ext.ColorPalettecomponent    Ext.Componentcontainer    Ext.Containercycle      Ext.CycleButtondataview     Ext.DataViewdatepicker    Ext.DatePickereditor      Ext.Editoreditorgrid    Ext.grid.EditorGridPanelflash      Ext.FlashComponentgrid       Ext.grid.GridPanellistview     Ext.ListViewpanel      Ext.Panelprogress     Ext.ProgressBarpropertygrid   Ext.grid.PropertyGridslider      Ext.Sliderspacer      Ext.Spacersplitbutton   Ext.SplitButtontabpanel     Ext.TabPaneltreepanel    Ext.tree.TreePanelviewport     Ext.ViewPortwindow      Ext.WindowToolbar components---------------------------------------paging      Ext.PagingToolbartoolbar     Ext.Toolbartbbutton     Ext.Toolbar.Button    (deprecated; use button)tbfill      Ext.Toolbar.Filltbitem      Ext.Toolbar.Itemtbseparator   Ext.Toolbar.Separatortbspacer     Ext.Toolbar.Spacertbsplit     Ext.Toolbar.SplitButton  (deprecated; use splitbutton)tbtext      Ext.Toolbar.TextItemMenu components---------------------------------------menu       Ext.menu.Menucolormenu    Ext.menu.ColorMenudatemenu     Ext.menu.DateMenumenubaseitem   Ext.menu.BaseItemmenucheckitem  Ext.menu.CheckItemmenuitem     Ext.menu.Itemmenuseparator  Ext.menu.Separatormenutextitem   Ext.menu.TextItemForm components---------------------------------------form       Ext.FormPanelcheckbox     Ext.form.Checkboxcheckboxgroup  Ext.form.CheckboxGroupcombo      Ext.form.ComboBoxdatefield    Ext.form.DateFielddisplayfield   Ext.form.DisplayFieldfield      Ext.form.Fieldfieldset     Ext.form.FieldSethidden      Ext.form.Hiddenhtmleditor    Ext.form.HtmlEditorlabel      Ext.form.Labelnumberfield   Ext.form.NumberFieldradio      Ext.form.Radioradiogroup    Ext.form.RadioGrouptextarea     Ext.form.TextAreatextfield    Ext.form.TextFieldtimefield    Ext.form.TimeFieldtrigger     Ext.form.TriggerFieldChart components---------------------------------------chart      Ext.chart.Chartbarchart     Ext.chart.BarChartcartesianchart  Ext.chart.CartesianChartcolumnchart   Ext.chart.ColumnChartlinechart    Ext.chart.LineChartpiechart     Ext.chart.PieChartStore xtypes---------------------------------------arraystore    Ext.data.ArrayStoredirectstore   Ext.data.DirectStoregroupingstore  Ext.data.GroupingStorejsonstore    Ext.data.JsonStoresimplestore   Ext.data.SimpleStore   (deprecated; use arraystore)store      Ext.data.Storexmlstore     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:"取消"}]

             })
    })

上一篇：學(xué)習(xí)ExtJS Window常用方法

下一篇：學(xué)習(xí)ExtJS TextField常用方法