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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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实现与ASP Banner组件相似的类
2006/10/09 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
小学教师师德整改措施
2014/09/29 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
手写实现JS中的new
2021/11/07 Javascript
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
Docker部署Mysql8的实现步骤
2022/07/07 Servers