ext3中xtype属性汇总

本文详细介绍了 ExtJS 中的各种组件,包括基本组件如按钮、滑动条等;容器及数据类组件如窗口、面板等;工具栏组件如工具栏、分页工具条等;菜单组件如菜单、选项菜单项等;表单及表单域组件如表单面板、多选框等;以及图表组件和数据集 Store 的相关内容。
基本组件:
xtypeClass描述
buttonExt.Button按钮
splitbuttonExt.SplitButton带下拉菜单的按钮
cycleExt.CycleButton带下拉选项菜单的按钮
buttongroupExt.ButtonGroup编组按钮(Since 3.0)
sliderExt.Slider滑动条
progressExt.ProgressBar进度条
statusbarExt.StatusBar状态条,2.2加进来,3.0 又去了
colorpaletteExt.ColorPalette调色板
datepickerExt.DatePicker日期选择面板
 
容器及数据类组件
xtypeClass描述
windowExt.Window窗口
viewportExt.ViewPort视口,即浏览器的视口,能随之伸缩
boxExt.BoxComponent盒子组件,相当于一个 <div>
componentExt.Component组件
containerExt.Container容器
panelExt.Panel面板
tabpanelExt.TabPanel选项面板
treepanelExt.tree.TreePanel树型面板
flashExt.FlashComponent显示 Flash 的组件(Since 3.0)
gridExt.grid.GridPanel表格
editorgridExt.grid.EditorGridPanel可编辑的表格
propertygridExt.grid.PropertyGrid属性表格
editorExt.Editor编辑器
dataviewExt.DataView数据显示视图
listviewExt.ListView列表视图
 
工具栏组件:
xtypeClass描述
pagingExt.PagingToolbar分页工具条
toolbarExt.Toolbar工具栏
tbbuttonExt.Toolbar.Button工具栏按钮
tbfillExt.Toolbar.Fill工具栏填充区
tbitemExt.Toolbar.Item工具条项目
tbseparatorExt.Toolbar.Separator工具栏分隔符
tbspacerExt.Toolbar.Spacer工具栏空白
tbsplitExt.Toolbar.SplitButton工具栏分隔按钮
tbtextExt.Toolbar.TextItem工具栏文本项
 
菜单组件:
xtypeClass描述
menuExt.menu.Menu菜单
colormenuExt.menu.ColorMenu颜色选择菜单
datemenuExt.menu.DateMenu日期选择菜单
menubaseitemBaseItem 
menucheckitemExt.menu.CheckItem选项菜单项
menuitemExt.menu.Item 
menuseparatorExt.menu.Separator菜单分隔线
menutextitemExt.menu.TextItem文本菜单项
 
表单及表单域组件:
xtypeClass描述
formExt.FormPanel/Ext.form.FormPanel表单面板
checkboxExt.form.Checkbox多选框
comboExt.form.ComboBox下拉框
datefieldExt.form.DateField日期选择项
timefieldExt.form.TimeField时间录入项
fieldExt.form.Field表单字段
fieldsetExt.form.FieldSet表单字段组
hiddenExt.form.Hidden表单隐藏域
htmleditorExt.form.HtmlEditorHTML 编辑器
labelExt.form.Label标签
numberfieldExt.form.NumberField数字编辑器
radioExt.form.Radio单选按钮
textareaExt.form.TextArea多行文本框
textfieldExt.form.TextField表单文本框
triggerExt.form.TriggerField触发录入项
checkboxgroupExt.form.CheckboxGroup编组的多选框(Since 2.2)
displayfieldExt.form.DisplayField仅显示,不校验/不被提交的文本框
radiogroupExt.form.RadioGroup编组的单选按钮(Since 2.2)
 
图表组件:
xtypeClass描述
chartExt.chart.Chart图表组件
barchartExt.chart.BarChart柱状图
cartsianchartExt.chart.CartesianChart 
columnchartExt.chart.ColumnChart 
linechartExt.chart.LineChart连线图
piechartExt.chart.PieChart扇形图
 
数据集 Store:
xtypeClass描述
arraystoreExt.data.ArrayStore 
directstoreExt.data.DirectStore 
groupingstoreExt.data.GroupingStore 
jsonstoreExt.data.JsonStore 
simplestoreExt.data.SimpleStore 
storeExt.data.Store 
xmlstoreExt.data.XmlStore

转载于:https://www.cnblogs.com/I-will-be-different/p/3314022.html

Ext框架中,`xtype` 是一个非常重要的属性,它用于标识组件的类型。Ext形成了一个结构及层次分明的组件体系,组件由 `Component` 类定义,每种组件都有一个指定的 `xtype` 属性值,通过该值可以得到一个组件的类型或者定义一个指定类型的组件[^1]。 例如,在创建表单架构的代码中,使用了不同的 `xtype` 来定义各种表单元素: ```javascript const formSchema = [ { xtype: &#39;textfield&#39;, fieldLabel: &#39;N1产品代码&#39;, name: &#39;productCode&#39; }, { xtype: &#39;combo&#39;, fieldLabel: &#39;产品类型&#39;, editable: false, multiSelect: true, emptyText: &#39;——请选择——&#39;, name: &#39;productCategory&#39;, displayField: &#39;categoryName&#39;, valueField: &#39;category&#39;, store: Ext.create(&#39;Ext.data.Store&#39;, { autoLoad: true, data: filterList }) }, { xtype: &#39;button&#39;, text: &#39;搜索&#39;, width: 80, height: 32, handler: function () { me.handleSearch() } } ]; ``` 这里的 `textfield`、`combo`、`button` 都是 `xtype` 的值,分别代表文本框、下拉框和按钮组件。 常见的 `xtype` 及其对应的类如下: | xtype | Class | | ---- | ---- | | button | Ext.Button | | component | Ext.Component | | container | Ext.Container | | dataview | Ext.DataView | | panel | Ext.Panel | | slider | Ext.form.Slider | | toolbar | Ext.Toolbar | | spacer | Ext.Spacer | | tabpanel | Ext.TabPanel | | formpanel | Ext.form.FormPanel | | checkboxfield | Ext.form.Checkbox | | selectfield | Ext.form.Select | | field | Ext.form.Field | | fieldset | Ext.form.FieldSet | | hiddenfield | Ext.form.Hidden | | numberfield | Ext.form.Number | | radiofield | Ext.form.Radio | | textareafield | Ext.form.TextArea | | textfield | Ext.form.Text | | togglefield | Ext.form.Toggle | 此外,每个组件类或其子类的实例都有 `getXTypes()` 和 `isXType()` 等方法,用于处理 `xtype` 相关的操作[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值