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 格式字符串的应用
Mar 29 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php实现点击可刷新验证码
2015/11/07 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
医学生自荐信
2013/12/03 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
环保专项行动方案
2014/05/12 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
刑事代理授权委托书
2014/09/17 职场文书
先进个人总结范文
2015/02/15 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL