ExtJS4新发现09_xtype的含义以及对应类

根据我在EXT论坛上的观察，xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype，或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。

 

定义

xtype就是一个代表类（Class）的标识名字。

譬如，你有这个类，名字是Ext.ux.MyGrid。正常情况下你需要用这个名字来实例化这个类（创建类的对象）。

除了类名外，你还可以这样登记类的xtype：

Ext.reg('mygrid', Ext.ux.MyGrid);

其中xtype是mygrid 而类名的一般形式是Ext.ux.MyGrid。上面的语句登记了新的xtype，换种说法说，xtype mygrid 与类 Ext.ux.MyGrid是连在一起的。

 

到底有什么好处？

试想一下，你手头上的是一个大型的项目，为了响应用户的操作，程序里面包含者大量的对象（windows、forms、grids）。用户点击图标或按钮，就会新建一个窗体，窗体里面又有grid，最终在屏幕上渲染出来。

嗯，我们回到Ext2.x之前的编码，那时候我们实例化所有对象是页面第一次加载后就进行的（程序代码第一次的运行）。在客户端内存中，Ext.ux.MyGrid类的对象已经存在，等待用户的点击。同样是这个grid，假设你上百个的实例，...是多么浪费宝贵的资源啊！很多grid其实用户未必会点击让它出现。

 

延时实例化

如果你使用xtype，那么在代码中的仅仅是一个用于配置的对象，像：

{xtype:'mygrid", border:false, width:600, height:400, ...}

消耗没有实例对象来得大。

嗯，用户点击按钮或图标会怎么样呢？Ext会辨认出它是一个准备要渲染的grid但不立刻实例化，Ext在ComponentMgr的帮忙下明白这么一回事：“如果我要实例化xtypemygrid的对象，我就知道要创建的实际是类Ext.ux.MyGrid的对象”。即如下列代码：

create : function(config, defaultType){    return new types[config.xtype || defaultType](config);}

等价于：

return new Ext.ux.MyGrid(config);

然后实例化grid，进行渲染和显示。谨记：需要的时候才实例化。

 

ExtJs xtype一览

基本组件：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