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 相关文章推荐
js 链式延迟执行DOME
Jan 04 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
python实现一次创建多级目录的方法
2015/05/15 Python
Python注释详解
2016/06/01 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python爬虫实例详解
2018/06/19 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
高校教师思想汇报
2014/01/11 职场文书
单位领导证婚词
2014/01/14 职场文书
军训 自我鉴定
2014/02/03 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
天猫活动策划方案
2014/08/21 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
借条格式范本
2015/05/25 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
聊聊JS ES6中的解构
2021/04/29 Javascript