ExtJS的應用界面是由很多小部件組合而成的,這些小部件被稱作“組件(Component)”,所有組件都是Ext.Component的子類,Ext.Component提供了生命周期管理包括初始化、渲染、大小和尺寸管理、銷毀等功能,這使得所有Ext.Component的子類都自動分享了這些能力。ExtJS提供了各式各樣豐富的組件,每一個組件都很容易被擴展創建成自定義組件。
每個組件都有一個代稱叫做xtype,通過該值可以得到一個組件的類型或者是定義一個指定類型的組件。
大的應用中,由於使用的方式有些組件可能根本沒有被用到(比如有100個頁面的應用,一個用戶登錄進來只操作了兩個頁面,這時把其他98個頁面的組件全部初始化是不合理的),例如一個用到TabPanel的應用,TabPanel的每個tab只當用戶點擊它的時候再渲染即可。這就是引入xtype機制的原因,有了xtype可以讓一個容器的子組件事先定義好,到真正需要的時候再初始化。
本xtype屬性表基於ExtJS-4.0.7
參照http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.Component
| 基本組件 |
||
| xtype |
Class |
描述 |
| button |
Ext.button.Button |
按鈕 |
| buttongroup |
Ext.container.ButtonGroup |
編組按鈕 |
| splitbutton |
Ext.button.Split |
帶下拉菜單的按鈕 |
| cycle |
Ext.button.Cycle |
帶下拉選項菜單的按鈕,一個SplitButton的實用子類,用於在多個item之間切換狀態 |
| slider |
Ext.slider.Single |
滑動條 |
| multislider |
Ext.slider.Multi |
|
| progressbar |
Ext.ProgressBar |
進度條 |
| statusbar |
Ext.ux.statusbar.StatusBar |
狀態條 |
| colorpicker |
Ext.picker.Color |
調色板 |
| datepicker |
Ext.picker.Date |
日期選擇面板 |
| 容器及數據類組件 |
||
| xtype |
Class |
描述 |
| viewport |
Ext.container.ViewPort |
視口,視覺窗口,即瀏覽器的顯示區域 |
| window |
Ext.window.Window |
窗口 |
| component |
Ext.Component |
組件 |
| container |
Ext.container.Container |
容器 |
| panel |
Ext.panel.Panel |
面板 |
| tabpanel |
Ext.tab.Panel |
選項面板 |
| treepanel |
Ext.tree.Panel |
樹型面板 |
| flash |
Ext.flash.Component |
顯示 Flash 的組件 |
| grid |
Ext.grid.Panel |
表格 |
| editorgrid |
Ext.grid.plugin.Editing |
可編輯的表格 |
| propertygrid |
Ext.grid.PropertyGrid |
屬性表格 |
| editor |
Ext.Editor |
編輯器 |
| dataview |
Ext.view.View |
數據顯示視圖 |
| listview |
Ext.ListView |
列表視圖 |
| 工具欄組件(Toolbar components) |
||
| xtype |
Class |
描述 |
| toolbar |
Ext.toolbar.Toolbar |
工具欄 |
| tbfill |
Ext.toolbar.Fill |
工具欄填充區 |
| tbitem |
Ext.toolbar.Item |
工具條項目 |
| tbseparator |
Ext.toolbar.Separator |
工具欄分隔符 |
| tbspacer |
Ext.toolbar.Spacer |
工具欄空白 |
| tbtext |
Ext.toolbar.TextItem |
工具欄文本項 |
| pagingtoolbar |
Ext.toolbar.Paging |
分頁工具條,工具欄中的間隔 |
| 菜單組件(Menu components) |
||
| xtype |
Class |
描述 |
| menu |
Ext.menu.Menu |
菜單 |
| menucheckitem |
Ext.menu.CheckItem |
選項菜單項 |
| menuitem |
Ext.menu.Item |
菜單項 |
| menuseparator |
Ext.menu.Separator |
菜單分隔線 |
| colormenu |
Ext.menu.ColorMenu |
顏色選擇菜單 |
| datemenu |
Ext.menu.DateMenu |
日期選擇菜單 |
| menubaseitem |
BaseItem |
|
| 表單及表單域組件(Form components) |
||
| xtype |
Class |
描述 |
| form |
Ext.form.Panel |
表單面板 |
| checkbox |
Ext.form.field.Checkbox |
復選框 |
| combo |
Ext.form.field.ComboBox |
下拉框 |
| datefield |
Ext.form.field.Date |
日期選擇項 |
| timefield |
Ext.form.field.Time |
時間錄入項 |
| field |
Ext.form.field.Base |
表單字段 |
| fieldset |
Ext.form.FieldSet |
表單字段組 |
| hidden |
Ext.form.field.Hidden |
表單隱藏域 |
| htmleditor |
Ext.form.field.HtmlEditor |
HTML編輯器 |
| numberfield |
Ext.form.field.Number |
數字編輯器 |
| label |
Ext.form.Label |
標簽 |
| radio |
Ext.form.field.Radio |
單選按鈕 |
| radiogroup |
Ext.form.RadioGroup |
編組的單選按鈕 |
| textarea |
Ext.form.field.TextArea |
區域文本框 |
| textfield |
Ext.form.field.Text |
表單文本框 |
| trigger |
Ext.form.field.Trigger |
觸發錄入項 |
| checkboxgroup |
Ext.form.CheckboxGroup |
編組的多選框 |
| displayfield |
Ext.form.field.DisplayField |
僅顯示,不校驗/不被提交的文本框 |
| 圖表組件(Chart components) |
||
| xtype |
Class |
描述 |
| chart |
Ext.chart.Chart |
圖表組件 |
| barchart |
Ext.chart.series.Bar |
柱狀圖 |
| columnchart |
Ext.chart.series.Column |
|
| linechart |
Ext.chart.series.Line |
連線圖 |
| piechart |
Ext.chart.series.Pie |
扇形圖 |
| cartsianchart |
Ext.chart.series.Cartesian |
|
| 數據集Store |
||
| xtype |
Class |
描述 |
| store |
Ext.data.Store |
數據存儲器 |
| jsonstore |
Ext.data.JsonStore |
json |
| xmlstore |
Ext.data.XmlStore |
xml |
| arraystore |
Ext.data.ArrayStore |
array |
| directstore |
Ext.data.DirectStore |
|
