|
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的默認值,如:
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:"取消"}]
})
})
JavaScript技術:學習ExtJS Panel常用方法,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。