EXT中xtype的含义分析


Posted in Javascript onJanuary 07, 2010

序言

根据我在论坛上的观察,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); 
}

等价于:
Java代码
return new Ext.ux.MyGrid(config);

然后实例化grid,进行渲染和显示。谨记:需要的时候才实例化。
Javascript 相关文章推荐
Jquery Ajax请求代码(2)
Jan 07 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 #Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 #Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 #Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 #Javascript
jQuery DOM操作小结与实例
Jan 07 #Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 #Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 #Javascript
You might like
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
nodeJS微信分享
2017/12/20 NodeJs
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
Python中List.count()方法的使用教程
2015/05/20 Python
Python os模块学习笔记
2015/06/21 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
python对XML文件的操作实现代码
2020/03/27 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
中秋节超市促销方案
2014/01/30 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
导游词格式
2015/02/13 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python