每個元件component都有特定的xtype(如下表)。
xtype的功用在於對資源應用的最佳化,
當元件是以xtype的方式建立時,
該元件並不會立刻產生實體,
而是到該元件確實被用到時才會產生。

//Explicit creation of contained Components:
var panel = new Ext.Panel({
  ...
  items: [
   new Ext.Button({
     text: 'OK'
   })
  ]
};
//Implicit creation using xtype:
var panel = new Ext.Panel({
  ...
  items: [{
   xtype: 'button',
   text: 'OK'
  }]
};

第一個範例中,Button會在Panel初始時立刻建立。
第二個範例中,Button會在Panel被秀出時才建立。


getXType() : String
getXType取得元件向Ext.ComponentMgr註冊的xtype。
var t = new Ext.form.TextField();
alert(t.getXType()); // alerts 'textfield'

getXTypes() : String
getXTypes取得元件的xtype的階層結構。
var t = new Ext.form.TextField();
alert(t.getXTypes()); // alerts 'component/box/field/textfield'


isXType( String xtype, [Boolean shallow] ) : void
測試該元件是否屬於某種xtype。
var t = new Ext.form.TextField();
var isText = t.isXType('textfield');    // true
var isBoxSubclass = t.isXType('box');    // true, descended from BoxComponent
var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance



xtype      Class
-------------  ------------------
box       Ext.BoxComponent
button      Ext.Button
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
grid       Ext.grid.GridPanel
paging      Ext.PagingToolbar
panel      Ext.Panel
progress     Ext.ProgressBar
propertygrid   Ext.grid.PropertyGrid
slider      Ext.Slider
splitbutton   Ext.SplitButton
statusbar    Ext.StatusBar
tabpanel     Ext.TabPanel
treepanel    Ext.tree.TreePanel
viewport     Ext.Viewport
window      Ext.Window

Toolbar components
---------------------------------------
toolbar     Ext.Toolbar
tbbutton     Ext.Toolbar.Button
tbfill      Ext.Toolbar.Fill
tbitem      Ext.Toolbar.Item
tbseparator   Ext.Toolbar.Separator
tbspacer     Ext.Toolbar.Spacer
tbsplit     Ext.Toolbar.SplitButton
tbtext      Ext.Toolbar.TextItem

Form components
---------------------------------------
form       Ext.FormPanel
checkbox     Ext.form.Checkbox
combo      Ext.form.ComboBox
datefield    Ext.form.DateField
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
textarea     Ext.form.TextArea
textfield    Ext.form.TextField
timefield    Ext.form.TimeField
trigger     Ext.form.TriggerField

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()