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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
jquery实现心算练习代码
Dec 06 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 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
PHP4之COOKIE支持详解
2006/10/09 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
永不消失的title提示代码
2007/02/15 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
总结30个CSS3选择器
2017/04/13 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
货款欠条范本
2015/07/03 职场文书
公司环境卫生管理制度
2015/08/05 职场文书