论坛很多人都在谈论ExtJs的内存泄露的问题,可是我发现在ExtJs官方论坛上这样的讨论很少,不明白其中原因。今天偶然的点击的spket的extension生成模板,注意到了官方推荐的自定义组件的开发模式,发现了问题所在。
关键就在xtype!结合之前的动态JS加载工具类,一个性能优秀的ExtJs开发框架逐渐成形
转载一篇xtype的文章http://www.iteye.com/topic/191657
序言
根据我在论坛上的观察,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, ...}
{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);
return new Ext.ux.MyGrid(config);
然后实例化grid,进行渲染和显示。谨记:需要的时候才实例化
。
分享到:
相关推荐
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的class的对照说明
有关于ext的xtype,Ext.QuickTips.init(),几种extjs的vtype默认支持的验证
中英文对照,理解更容易,是一个不错的参考文档
ExtJS xtype class对照表
extjs 开发中遇到的xtype值,此文挡包含了extjs中的全部xtype值
只是简单的了解加入组件的数据类型:例如 textfield 就是有标签的文本框,用户名:XXX XXX代表文本框。
extjs 常用vtype 代码 Ext.VTyps常用vtype大全!
extjs 必填项目加*
{xtype:"fieldset", width:500, labelAlign:"right", labelWidth:70, title:"个人信息" , collapsible:true, autoHeight:true, defaultType:"textfield", items:[ {fieldLabel:"姓名", //width:250, //...
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
ExtJs原生批量上传 + 实时进度 Ext.define('MyApp.ux.upload.UploadWindow', { extend: 'Ext.window.Window', height: 400, width: 700, title: '文件上传', closeAction: 'hide', maximizable: true, ...
ExtJS3.3版本中Window存在BUG,如下代码: Ext.onReady({ var _window = new Ext.Window({ title:"测试窗体", layout:"form", width:300, plain:true, items:{ xtype:"textfield", ...
EXTJS5 日期时分秒控件,直接引用到程序中使用。网上有很多extjs4版本的和EXTJS5不兼容。调用实例代码: {labelWidth:60,width: 220,name:'mydate',fieldLabel: '日期',allowBlank: false,xtype: 'datetimefield',...
xtype:'monthfield' 因为extjs的bug(3月30如果选择2月将自动变成3月)。所以需要修改monthField中safeParse方法: else if ("Y-m"==format) { // set time to 12 noon, then clear the time var parsedDate = Date...
hiddenName:'userInfo.userId', //hiddenName动态的绑定数据库中对应的字段 xtype:'textField', //xtype可以分为三类,textField为表单域的控件 fieldLabel:'用户编码*</font>',//控件前的文本说明 labelSeparator...