ExtJs xtype一览

写 ExtJs  相关代码多了就会用 xtype 的体会,下面是 ExtJs 中各组件的 xtype 与组件类的对应表。不包括 Ext.ux 命名空间中扩展的组件。其实在 Ext API 文档中有此列表,在 API 帮助中查找 Component 打该页面就能看到,即:http://www.extjs.com/deploy/dev/docs/output/Ext.Component.html

 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

multislider      Ext.slider.MultiSlider

panel            Ext.Panel

progress         Ext.ProgressBar

propertygrid     Ext.grid.PropertyGrid

slider           Ext.slider.SingleSlider

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.form.FormPanel

checkbox         Ext.form.Checkbox

checkboxgroup    Ext.form.CheckboxGroup

combo            Ext.form.ComboBox

compositefield   Ext.form.CompositeField

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

 

核心代码中的 xtype 组件

E:Study ExtJS>grep -do Ext.reg(‘ extjs3.0src*.js
extjs3.0srcwidgetsBoxComponent.js:Ext.reg(‘box’, Ext.BoxComponent);
extjs3.0srcwidgetsBoxComponent.js  Ext.reg(‘spacer’, Ext.Spacer);
extjs3.0srcwidgetsButton.js:Ext.reg(‘button’, Ext.Button);
extjs3.0srcwidgetsButtonGroup.js:Ext.reg(‘buttongroup’, Ext.ButtonGroup);
extjs3.0srcwidgetsColorPalette.js:Ext.reg(‘colorpalette’, Ext.ColorPalette);
extjs3.0srcwidgetsComponent.js:Ext.reg(‘component’, Ext.Component);
extjs3.0srcwidgetsContainer.js:Ext.reg(‘container’, Ext.Container);
extjs3.0srcwidgetsCycleButton.js:Ext.reg(‘cycle’, Ext.CycleButton);
extjs3.0srcwidgetsDataView.js:Ext.reg(‘dataview’, Ext.DataView);
extjs3.0srcwidgetsDatePicker.js:Ext.reg(‘datepicker’, Ext.DatePicker);
extjs3.0srcwidgetsEditor.js:Ext.reg(‘editor’, Ext.Editor);
extjs3.0srcwidgetsPagingToolbar.js:Ext.reg(‘paging’, Ext.PagingToolbar);
extjs3.0srcwidgetsPanel.js:Ext.reg(‘panel’, Ext.Panel);
extjs3.0srcwidgetsProgressBar.js:Ext.reg(‘progress’, Ext.ProgressBar);
extjs3.0srcwidgetsSlider.js:Ext.reg(‘slider’, Ext.Slider);
extjs3.0srcwidgetsSplitButton.js:Ext.reg(‘splitbutton’, Ext.SplitButton);
extjs3.0srcwidgetsTabPanel.js:Ext.reg(‘tabpanel’, Ext.TabPanel);
extjs3.0srcwidgetsToolbar.js:Ext.reg(‘toolbar’, Ext.Toolbar);
extjs3.0srcwidgetsToolbar.js  Ext.reg(‘tbitem’, T.Item);
extjs3.0srcwidgetsToolbar.js  Ext.reg(‘tbseparator’, T.Separator);
extjs3.0srcwidgetsToolbar.js  Ext.reg(‘tbspacer’, T.Spacer);
extjs3.0srcwidgetsToolbar.js  Ext.reg(‘tbfill’, T.Fill);
extjs3.0srcwidgetsToolbar.js  Ext.reg(‘tbtext’, T.TextItem);
extjs3.0srcwidgetsToolbar.js  Ext.reg(‘tbbutton’, T.Button);
extjs3.0srcwidgetsToolbar.js  Ext.reg(‘tbsplit’, T.SplitButton);
extjs3.0srcwidgetsViewport.js:Ext.reg(‘viewport’, Ext.Viewport);
extjs3.0srcwidgetsWindow.js:Ext.reg(‘window’, Ext.Window);
extjs3.0srcwidgets reeTreePanel.js:Ext.reg(‘treepanel’, Ext.tree.TreePanel);
extjs3.0srcwidgetsmenuBaseItem.js:Ext.reg(‘menubaseitem’, Ext.menu.BaseItem);
extjs3.0srcwidgetsmenuCheckItem.js:Ext.reg(‘menucheckitem’, Ext.menu.CheckItem);
extjs3.0srcwidgetsmenuColorMenu.js:Ext.reg(‘colormenu’, Ext.menu.ColorMenu);
extjs3.0srcwidgetsmenuDateMenu.js: Ext.reg(‘datemenu’, Ext.menu.DateMenu);
extjs3.0srcwidgetsmenuItem.js:Ext.reg(‘menuitem’, Ext.menu.Item);
extjs3.0srcwidgetsmenuMenu.js:Ext.reg(‘menu’, Ext.menu.Menu);
extjs3.0srcwidgetsmenuSeparator.js:Ext.reg(‘menuseparator’, Ext.menu.Separator);
extjs3.0srcwidgetsmenuTextItem.js:Ext.reg(‘menutextitem’, Ext.menu.TextItem);
extjs3.0srcwidgetslistListView.js:Ext.reg(‘listview’, Ext.ListView);
extjs3.0srcwidgetsgridEditorGrid.js:Ext.reg(‘editorgrid’, Ext.grid.EditorGridPanel);
extjs3.0srcwidgetsgridGridPanel.js:Ext.reg(‘grid’, Ext.grid.GridPanel);
extjs3.0srcwidgetsformCheckbox.js:Ext.reg(‘checkbox’, Ext.form.Checkbox);
extjs3.0srcwidgetsformCheckboxGroup.js:Ext.reg(‘checkboxgroup’, Ext.form.CheckboxGroup);
extjs3.0srcwidgetsformCombo.js:Ext.reg(‘combo’, Ext.form.ComboBox);
extjs3.0srcwidgetsformDateField.js:Ext.reg(‘datefield’, Ext.form.DateField);
extjs3.0srcwidgetsformDisplayField.js:Ext.reg(‘displayfield’, Ext.form.DisplayField);
extjs3.0srcwidgetsformField.js:Ext.reg(‘field’, Ext.form.Field);
extjs3.0srcwidgetsformFieldSet.js:Ext.reg(‘fieldset’, Ext.form.FieldSet);
extjs3.0srcwidgetsformForm.js:Ext.reg(‘form’, Ext.FormPanel);
extjs3.0srcwidgetsformHidden.js:Ext.reg(‘hidden’, Ext.form.Hidden);
extjs3.0srcwidgetsformHtmlEditor.js:Ext.reg(‘htmleditor’, Ext.form.HtmlEditor);
extjs3.0srcwidgetsformLabel.js:Ext.reg(‘label’, Ext.form.Label);
extjs3.0srcwidgetsformNumberField.js:Ext.reg(‘numberfield’, Ext.form.NumberField);
extjs3.0srcwidgetsformRadio.js:Ext.reg(‘radio’, Ext.form.Radio);
extjs3.0srcwidgetsformRadioGroup.js:Ext.reg(‘radiogroup’, Ext.form.RadioGroup);
extjs3.0srcwidgetsformTextArea.js:Ext.reg(‘textarea’, Ext.form.TextArea);
extjs3.0srcwidgetsformTextField.js:Ext.reg(‘textfield’, Ext.form.TextField);
extjs3.0srcwidgetsformTimeField.js:Ext.reg(‘timefield’, Ext.form.TimeField);
extjs3.0srcwidgetsformTriggerField.js:Ext.reg(‘trigger’, Ext.form.TriggerField);
extjs3.0srcwidgetschartChart.js:Ext.reg(‘chart’, Ext.chart.Chart);
extjs3.0srcwidgetschartChart.js  Ext.reg(‘piechart’, Ext.chart.PieChart);
extjs3.0srcwidgetschartChart.js  Ext.reg(‘cartesianchart’, Ext.chart.CartesianChart);
extjs3.0srcwidgetschartChart.js  Ext.reg(‘linechart’, Ext.chart.LineChart);
extjs3.0srcwidgetschartChart.js  Ext.reg(‘columnchart’, Ext.chart.ColumnChart);
extjs3.0srcwidgetschartChart.js  Ext.reg(‘stackedcolumnchart’, Ext.chart.StackedColumnChart);
extjs3.0srcwidgetschartChart.js  Ext.reg(‘barchart’, Ext.chart.BarChart);
extjs3.0srcwidgetschartChart.js  Ext.reg(‘stackedbarchart’, Ext.chart.StackedBarChart);
extjs3.0srcwidgetschartFlashComponent.js:Ext.reg(‘flash’, Ext.FlashComponent);
extjs3.0srcdataArrayStore.js:Ext.reg(‘arraystore’, Ext.data.ArrayStore);
extjs3.0srcdataArrayStore.js  Ext.reg(‘simplestore’, Ext.data.SimpleStore);
extjs3.0srcdataDirectStore.js:Ext.reg(‘directstore’, Ext.data.DirectStore);
extjs3.0srcdataGroupingStore.js:Ext.reg(‘groupingstore’, Ext.data.GroupingStore);
extjs3.0srcdataJsonStore.js:Ext.reg(‘jsonstore’, Ext.data.JsonStore);
extjs3.0srcdataStore.js:Ext.reg(‘store’, Ext.data.Store);
extjs3.0srcdataXmlStore.js:Ext.reg(‘xmlstore’, Ext.data.XmlStore);

example 中有如  Ext.ux 样的 xtype 组件

E:Study ExtJS>grep -do Ext.reg(‘ extjs3.0examples*.js
extjs3.0examplesinit.js:Ext.reg(‘samplespanel’, Ext.samples.SamplePanel);
extjs3.0examplesuxColumnNodeUI.js:Ext.reg(‘columntree’, Ext.ux.tree.ColumnTree);
extjs3.0examplesuxFileUploadField.js:Ext.reg(‘fileuploadfield’, Ext.ux.form.FileUploadField);
extjs3.0examplesuxGMapPanel.js:Ext.reg(‘gmappanel’, Ext.ux.GMapPanel);
extjs3.0examplesuxGroupTab.js:Ext.reg(‘grouptab’, Ext.ux.GroupTab);
extjs3.0examplesuxGroupTabPanel.js:Ext.reg(‘grouptabpanel’, Ext.ux.GroupTabPanel);
extjs3.0examplesuxItemSelector.js:Ext.reg(‘itemselector’, Ext.ux.form.ItemSelector);
extjs3.0examplesuxMultiSelect.js:Ext.reg(‘multiselect’, Ext.ux.form.MultiSelect);
extjs3.0examplesuxPortal.js:Ext.reg(‘portal’, Ext.ux.Portal);
extjs3.0examplesuxPortalColumn.js:Ext.reg(‘portalcolumn’, Ext.ux.PortalColumn);
extjs3.0examplesuxPortlet.js:Ext.reg(‘portlet’, Ext.ux.Portlet);
extjs3.0examplesuxSelectBox.js:Ext.reg(‘selectbox’, Ext.ux.form.SelectBox);
extjs3.0examplesuxSpinnerField.js:Ext.reg(‘spinnerfield’, Ext.ux.form.SpinnerField);
extjs3.0examplesuxStatusBar.js:Ext.reg(‘statusbar’, Ext.ux.StatusBar);
extjs3.0examplesuxux-all-debug.js:Ext.reg(‘columntree’, Ext.ux.tree.ColumnTree);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘fileuploadfield’, Ext.ux.form.FileUploadField);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘gmappanel’, Ext.ux.GMapPanel); Ext.ns(‘Ext.ux.grid’);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘grouptab’, Ext.ux.GroupTab);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘grouptabpanel’, Ext.ux.GroupTabPanel);/*
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘itemselector’, Ext.ux.form.ItemSelector);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘multiselect’, Ext.ux.form.MultiSelect);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘portal’, Ext.ux.Portal);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘portalcolumn’, Ext.ux.PortalColumn);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘portlet’, Ext.ux.Portlet);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘selectbox’, Ext.ux.form.SelectBox);
extjs3.0examplesuxux-all-debug.js  Ext.reg(‘spinnerfield’, Ext.ux.form.SpinnerField);
extjs3.0examplesuxux-all.js: grep: input lines truncated – result questionable
extjs3.0exampleskey-feed-viewerFeedGrid.js:Ext.reg(‘appfeedgrid’, FeedGrid);
extjs3.0exampleskey-feed-viewerFeedPanel.js:Ext.reg(‘appfeedpanel’, FeedPanel);
extjs3.0exampleskey-feed-viewerMainPanel.js:Ext.reg(‘appmainpanel’, MainPanel);
extjs3.0examplesimage-organizerimgorgAlbumsPanel.js:Ext.reg(‘img-albumspanel’, Imgorg.AlbumsPanel);
extjs3.0examplesimage-organizerimgorgAlbumsPanel.js  Ext.reg(‘img-album’, Imgorg.Album);
extjs3.0examplesimage-organizerimgorgAlbumTree.js:Ext.reg(‘img-albumtree’, Imgorg.AlbumTree);
extjs3.0examplesimage-organizerimgorgDirectCombo.js:Ext.reg(‘img-tagcombo’, Imgorg.TagCombo);
extjs3.0examplesimage-organizerimgorgDirectCombo.js  Ext.reg(‘img-tagmulticombo’, Imgorg.TagMultiCombo);
extjs3.0examplesimage-organizerimgorgDirectCombo.js  Ext.reg(‘img-albumcombo’, Imgorg.AlbumCombo);
extjs3.0examplesimage-organizerimgorgImageDv.js:Ext.reg(‘img-dv’, Imgorg.ImageDv);
extjs3.0examplesimage-organizerimgorgImagePanel.js:Ext.reg(‘img-panel’,Imgorg.ImagePanel);
extjs3.0examplesimage-organizerimgorgImageThumbPanel.js:Ext.reg(‘img-thumbpanel’, Imgorg.ImageThumbPanel);
extjs3.0examplesimage-organizerimgorgMultiCombo.js:Ext.reg(‘multicombo’, Ext.ux.MultiCombo);
extjs3.0examplesimage-organizerimgorgUploadQueue.js:Ext.reg(‘img-uploadqueue’, Imgorg.UploadQueue);
extjs3.0examplesgridinding-with-classes.js:Ext.reg(‘bookgrid’, App.BookGrid);
extjs3.0examplesgridinding-with-classes.js  Ext.reg(‘bookdetail’, App.BookDetail);
extjs3.0examplesgridinding-with-classes.js  Ext.reg(‘bookmasterdetail’, App.BookMasterDetail);
extjs3.0examplesfeed-viewerFeedGrid.js:Ext.reg(‘appfeedgrid’, FeedGrid);
extjs3.0examplesfeed-viewerFeedPanel.js:Ext.reg(‘appfeedpanel’, FeedPanel);
extjs3.0examplesfeed-viewerMainPanel.js:Ext.reg(‘appmainpanel’, MainPanel);

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>