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 不只是脚本
May 30 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
js cavans实现静态滚动弹幕
May 21 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue filters的使用详解
2018/06/11 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2014年妇女工作总结
2014/12/06 职场文书
婚宴父母致辞
2015/07/27 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技