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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
代码生成器 document.write()
Apr 15 Javascript
javascript 精粹笔记
May 09 Javascript
javascript定义函数的方法
Dec 06 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
Vue事件处理原理及过程详解
Mar 11 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+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
javascript知识点收藏
2007/02/22 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
为什么是 Python -m
2020/06/19 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
优秀班组申报材料
2014/12/25 职场文书
年度考核表个人总结
2015/03/06 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS