ExtJs xtype類型介紹


自定義組件在定義的時候可以通過xtype配置為組件指定xtype短名稱,此后創建對象可以通過xtype來創建自定義對象了,示例代碼如下:

Ext.define('MyApp.PressMeButton', {
    extend: 'Ext.button.Button',
    xtype: 'pressmebutton',//指定自定義組件的xtype
    text: 'Press Me'
});
基本組件:
xtype Class 描述
button Ext.Button 按鈕
splitbutton Ext.SplitButton 帶下拉菜單的按鈕
cycle Ext.CycleButton 帶下拉選項菜單的按鈕
buttongroup Ext.ButtonGroup 編組按鈕(Since 3.0)
slider Ext.Slider 滑動條
progress Ext.ProgressBar 進度條
statusbar Ext.StatusBar 狀態條,2.2加進來,3.0 又去了
colorpalette Ext.ColorPalette 調色板
datepicker Ext.DatePicker 日期選擇面板
 
容器及數據類組件
xtype Class 描述
window Ext.Window 窗口
viewport Ext.ViewPort 視口,即瀏覽器的視口,能隨之伸縮
box Ext.BoxComponent 盒子組件,相當於一個 <div>
component Ext.Component 組件
container Ext.Container 容器
panel Ext.Panel 面板
tabpanel Ext.TabPanel 選項面板
treepanel Ext.tree.TreePanel 樹型面板
flash Ext.FlashComponent 顯示 Flash 的組件(Since 3.0)
grid Ext.grid.GridPanel 表格
editorgrid Ext.grid.EditorGridPanel 可編輯的表格
propertygrid Ext.grid.PropertyGrid 屬性表格
editor Ext.Editor 編輯器
dataview Ext.DataView 數據顯示視圖
listview Ext.ListView 列表視圖
 
工具欄組件:
xtype Class 描述
paging Ext.PagingToolbar 分頁工具條
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 工具欄文本項
 
菜單組件:
xtype Class 描述
menu Ext.menu.Menu 菜單
colormenu Ext.menu.ColorMenu 顏色選擇菜單
datemenu Ext.menu.DateMenu 日期選擇菜單
menubaseitem BaseItem  
menucheckitem Ext.menu.CheckItem 選項菜單項
menuitem Ext.menu.Item  
menuseparator Ext.menu.Separator 菜單分隔線
menutextitem Ext.menu.TextItem 文本菜單項
 
表單及表單域組件:
xtype Class 描述
form Ext.FormPanel/Ext.form.FormPanel 表單面板
checkbox Ext.form.Checkbox 多選框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期選擇項
timefield Ext.form.TimeField 時間錄入項
field Ext.form.Field 表單字段
fieldset Ext.form.FieldSet 表單字段組
hidden Ext.form.Hidden 表單隱藏域
htmleditor Ext.form.HtmlEditor HTML 編輯器
label Ext.form.Label 標簽
numberfield Ext.form.NumberField 數字編輯器
radio Ext.form.Radio 單選按鈕
textarea Ext.form.TextArea 多行文本框
textfield Ext.form.TextField 表單文本框
trigger Ext.form.TriggerField 觸發錄入項
checkboxgroup Ext.form.CheckboxGroup 編組的多選框(Since 2.2)
displayfield Ext.form.DisplayField 僅顯示,不校驗/不被提交的文本框
radiogroup Ext.form.RadioGroup 編組的單選按鈕(Since 2.2)
 
圖表組件:
xtype Class 描述
chart Ext.chart.Chart 圖表組件
barchart Ext.chart.BarChart 柱狀圖
cartsianchart Ext.chart.CartesianChart  
columnchart Ext.chart.ColumnChart  
linechart Ext.chart.LineChart 連線圖
piechart Ext.chart.PieChart 扇形圖
 
數據集 Store:
xtype Class 描述
arraystore Ext.data.ArrayStore  
directstore Ext.data.DirectStore  
groupingstore Ext.data.GroupingStore  
jsonstore Ext.data.JsonStore  
simplestore Ext.data.SimpleStore  
store Ext.data.Store  
xmlstore Ext.data.XmlStore  


另外:關於 ExtJs 如何依據 xtype 創建對應組件這里只簡單的說一句,ExtJs 的組件是通過 Ext.ComponentMgr 來管理的,組件類會以 xtype 為 key 注冊到 ComponentMgr 中,用 xtype 形式時就通過 ComponentMgr 來創建 xtype 對應的組件。ComponentMgr 如何對組件進行管理下面會進一步深入探究。

假如想要獲得 xtype 與組件最完整的列表,有兩種辦法:

1. ExtJs 運行后,遍歷 ComponentMgr 的 types{} 哈稀屬性,這個屬性是私有的,需改源代使之為公有,存儲結構為{button:Ext.Button, cycle:Ext.CycleButton}

2. 用 grep 從 ExtJs 源代碼中搜尋出來。在組件的 JS 代碼(如 Button.js) 中會用 Ext.reg('button', Ext.Button) 形式注冊,所以下面我用移植到 Windows 上的 GNU grep 程序從源代碼中扒出所有的 xtype 及對應的組件類來。

from:http://wxg6203.iteye.com/blog/688656


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM