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 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
Javascript实现简易天数计算器
May 18 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
微信小程序canvas实现签名功能
Jan 19 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 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
用python处理MS Word的实例讲解
2018/05/08 Python
pow在python中的含义及用法
2019/07/11 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
设计顾问服务计划书
2014/05/04 职场文书
工资证明范本
2015/06/12 职场文书
亲戚关系证明
2015/06/24 职场文书
人力资源部工作计划
2019/05/14 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python