ExtJs:xtype的含义
来源:互联网 发布:工业控制软件界面 编辑:程序博客网 时间:2024/05/16 23:43
根据我在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的帮忙下明白这么一回事:“如果我要实例化xtype mygrid
的对象,我就知道要创建的实际是类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- ExtJs:xtype的含义
- ExtJs:xtype的含义
- ExtJS的xtype列表
- extjs 可用的xtype
- ExtJs xtype的使用
- EXTJS的xtype的类型
- ExtJs中可用的 xtype
- Extjs xtype
- ExtJs Xtype
- Extjs xtype
- extJs xtype
- Extjs xtype
- ExtJs xtype
- ExtJS-xtype
- ExtJs的列模式column(xtype)详解
- ExtJs xtype 与空间的一一对应
- extjs的alias和xtype比较
- EXT中xtype的含义分析
- 使用C#开发ActiveX控件全攻略
- iOS多线程的初步研究(八)-- dispatch队列
- C++ 顺序容器总结
- js动态更改Form表单action,进行提交
- 用递归得到Execl的列头字符
- ExtJs:xtype的含义
- ADT eclipse maven plugin 插件 安装 和 配置
- java事件处理机制(自定义事件)
- IOS 学习之XML解析(一)
- ajax的一篇总结
- javaNIO笔记三
- Apache配置虚拟主机
- 小P的故事——神奇的饭卡 [01背包]
- SPComm的一点小诀窍 spcomm的问题导致数据丢失