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客户端脚本的设计和应用
Aug 21 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
5个实用的JavaScript新特性
Jun 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
php GD绘制24小时柱状图
2008/06/28 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
js正确获取元素样式详解
2009/08/07 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
2017/02/23 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
React复制到剪贴板的示例代码
2017/08/22 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python中的tcp示例详解
2018/12/09 Python
详解Python:面向对象编程
2019/04/10 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
如何在python中执行另一个py文件
2020/04/30 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
酒店出纳岗位职责
2013/12/29 职场文书
会走路的树教学反思
2014/02/20 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
商场收银员岗位职责
2015/04/07 职场文书
校园之声广播稿
2015/08/18 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python