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 相关文章推荐
图片之间的切换
Jun 26 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
JS数组属性去重并校验重复数据
Jan 10 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
抓取YAHOO股票报价的类
2009/05/15 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python中的CURL PycURL使用例子
2014/06/01 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
工商管理本科毕业生求职信范文
2013/10/05 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
运动会5000米加油稿
2015/07/21 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
解决vue中provide inject的响应式监听
2022/04/19 Vue.js