- 浏览: 236161 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
月度银墙:
wangxiang243 写道不错 !但是ext4中六月和十二 ...
ext2,3,和4 版本 只显示年月的日期插件 -
38123978:
你好,我最近在看cassandra的性能,我想问一下5000万 ...
Cassandra学习笔记3 -
zhaojinmeng:
您好楼主,extjs5要怎么扩展啊?求指导
ext2,3,和4 版本 只显示年月的日期插件 -
love_wting:
为什么下拉框的表格样式显示了,数据访问json也从数据库中取到 ...
Extjs 下拉grid -
laungcisin:
yangxiutian 写道另外Ext4.2.1还故意把x-m ...
ext2,3,和4 版本 只显示年月的日期插件
Extjs的事件也是经过良好封装的,对于事件的处理都由Ext.uitl.Observable类提供接口。这里接口的意思是Observable实际上起了一个抽象类的作用,Extjs中有大量的组件都是继承自这个类的。这个类提供了一些基本的方法比如addEvents,addlistener,fireEvent等等。
本文暂时不介绍如何使用extjs的组件响应事件,而是介绍Extjs的事件的一些实现原理。整个Extjs框架都是以一种面向对象的方式开发的,所以理解Javascript中的继承也很重要。
Extjs实现继承的函数是一个很核心的函数Ext.extend,extend方法有两个重构版本,第一个接受两个参数,第一个是extend( Function superclass
, Object overrides
) ,第二个是extend( Function subclass
, Function superclass
,Object overrides
) : Function,第二个版本是在subclass的基础上。superclass就是超类的构造函数,overrides是一个对象,里边的属性就是要覆盖父类的属性。继承了父类的子类具有父类的prototype中的所有方法。并且子类可以覆盖父类的方法(override),更进一步,子类的每个对象也可以覆盖父类的方法。其实我觉得这个函数没什么作用,修改prototype的效果是等效的,当然,extjs的目的肯定是要把prototype这个神奇的东西完全屏蔽起来,使程序员能够像处理其他语言一样来处理Javascript。当然,即使如此,它的继承和一般的继承还是有些不同的,下面先看个例子,准备好一个Person类
Person = function(name) { this.name = name; this.fn = function() { alert('I am a person') }; } Person.prototype.print=function(){ alert('I am a person');} Person.prototype.showAge = function() { alert('I am older than 0'); } Person.prototype.showName = function() { alert('Show Name:'+this.name) }; var per = new Person('Tom'); per.showName();
子类:
Student = function(id) { this.id = id; } Student.prototype.showID = function() { alert(this.id); } //子类的方法 继承: Ext.extend(Student, Person); stu.showName(); !!没有结果!stu没有name的定义
stu.fn(); !!没有结果
stu.showID(); !!!还是没有结果
到此我们已经发现了一些不同:在父类的构造函数中的内容是不会继承的,父类的构造函数不会被调用,子类(prototype中)已有的方法也会丢失!继续看下去,将Ext.extend下面的代码替换成:
var stu = new Student('01'); Student.override({ print: function() { alert('I am a student'); } }); stu.override({ print: function() { alert('I am a bad student,but I won\'t affect others'); } }); stu.print(); stu.showAge(); var stu2 = new Student(); stu2.print();
这里的函数都能够按预期输出,showAge是执行的父类的方法,stu.print是执行的stu.override中指定的方法,而stu2执行的是Student.override中指定的方法。到这里,我们已经大概能猜出extend是如何实现的了。下面看它真正的源代码,这个方法位于Ext.js中,代码和注释如下:
extend : function(){ // inline overrides var io = function(o){ //注意这个方法的this,仅看这里并不知道这个this是什么,下面这个io会被赋值给sbp.override,也就是子类的prototype for(var m in o){ //从而每个子类的对象的override都会指向这个方法,如果子类对象调用了override,那么这个this就是子类的对象了。也就是 this[m] = o[m]; //上面的例子中stu.override表现出来的效果,仅对当前对象有效。从这里可以看出,override不仅仅是传统意义上的覆盖,完全也可以 } //用来添加新方法。 }; var oc = Object.prototype.constructor; return function(sb, sp, overrides){ if(Ext.isObject(sp)){ //是在检测当前使用的是哪个版本的重构函数。如果sp实际上是overrides,就做些替换工作,让变量的实际意义和名称相符合。 overrides = sp; sp = sb; sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; //这个没看懂…… } var F = function(){}, sbp, spp = sp.prototype; F.prototype = spp; //F是父类的一个“干净”拷贝,所谓干净,是指它不会把父类中在构造函数内部定义的属性带过来。
//例如 Person=function()
// {this.privateFn=new function{ some code goes here}}
//那么这个privateFn对子类是不可见的,所以在构造函数中利用this定义的属性都相当于是类的私有变量。
sbp = sb.prototype = new F(); //将子类的prototype设置为父类的prototype,继承的核心步骤。
sbp.constructor=sb; //设置正确的构造函数指向,
sb.superclass=spp; //设置父类 if(spp.constructor == oc){ //没看懂……,这个是干嘛用的?望高人指点 spp.constructor=sp; } sb.override = function(o){ //子类的重写方法,这个重写方法是函数的重写方法。它修改的是prototype。 Ext.override(sb, o); //见最后。 }; sbp.superclass = sbp.supr = (function(){ //设置原型的父类 return spp; }); sbp.override = io; //给子类的prototype提供override方法,这样单个实体也可以覆盖,它修改的是实体对象。注意和上面的sb的override区分。 Ext.override(sb, overrides); //重写 sb.extend = function(o){return Ext.extend(sb, o);}; //给子类提供extend方法,以实现多重继承 return sb; //返回子类。 }; }();
下面是Ext.override的代码,比较明了的,和那个inline override相比,它就是修改的prototype:
override : function(origclass, overrides){ if(overrides){ var p = origclass.prototype; Ext.apply(p, overrides); if(Ext.isIE && overrides.hasOwnProperty('toString')){ // 这个是什么?IE的特殊点? p.toString = overrides.toString; } } }
现在就可以开始正式介绍Extjs的事件模型了。和其他语言事件类似,首先要为一个类定义事件,其他语言(例如C#)的事件一般有一个专门的event类型,event类型实际上可以看作是委托的数组,当然委托实际上是函数,添加时间监听器(listener),就是想委托数组中添加委托(函数),所谓触发事件就是把数组中的函数统统执行一遍。Javascript也是类似的,只是Javascript的函数比那些语言强大灵活的多,因此也不需要什么event类型了。Javascript的事件看起来就像一个字符串(它内部应该也是保留了一个数组的),可以通过Observale.addEvents方法添加事件,通过Observale.fireEvent触发事件,通过Observale.addListner增加事件监听器。下面举一个没什么意义却能说明问题的例子。
Odder = function(min, max) { this.min = min; this.max = max; this.addEvents('onFindOdd'); } Ext.extend(Odder, Ext.util.Observable, { run: function() { for (var i = this.min; i < this.max; i++) { if (i % 2 != 0) { this.fireEvent('onFindOdd',i); } } } }); var p = new Odder(4, 8); p.addListener('onFindOdd',function(n){alert(n);}); p.run();
Odder是这么一个类,它通过一个构造函数传入一个范围,然后寻找这个范围内的所有奇数,每找到一个就触发一个事件。我给它加一个事件处理程序,把它找到的奇数alert出来。 要注意,这里的事件处理程序的参数只能靠程序员自己保持一致,它不像委托那样强类型。
注意,我没有采用官网上的例子:
Employee = Ext.extend(Ext.util.Observable, {
constructor: function(config){
this.name = config.name;
this.addEvents({
"fired" : true,
"quit" : true
});
// Copy configured listeners into *this* object so that the base class's
// constructor will add them.
this.listeners = config.listeners;
// Call our superclass constructor to complete construction process.
Employee.superclass.constructor.call(config)
}
});
This could then be used like this:
var newEmployee = new Employee({
name: employeeName,
listeners: {
quit: function() {
// By default, "this" will be the object that fired the event.
alert(this.name + " has quit!");
}
}
});
发表评论
-
js原型分析研究
2012-07-23 22:44 1443原型是个很微妙的东西,很多人不是很理解,理解了原型对于 ... -
Ext4.1.0 API中文版V0.4 Beta(持续更新)
2012-07-17 18:40 1075Ext4.1.0 API中文版V0.4 Beta html ... -
记录回答别人的Ext4问题
2012-07-10 13:23 26451:Ext4版本 双击Tab页面页签关闭 来自问题:ht ... -
Extjs4 时分秒日期插件
2012-05-11 13:05 12343插件1: 初始界面 弹出界面 插件代码 见附件 ... -
Ext3 日期范围插件
2012-04-03 17:32 2123先上 效果图有图有真相嘛 使用例子: ... -
Extjs2分页树 带查询功能
2012-03-29 11:37 4177先上效果图: 插件代码见附件 使 ... -
ext2 日期范围控件(2个控件)
2012-03-25 17:39 3010控件1 介绍: 首先加入 Ext.apply( ... -
ext2 grid 封装 (包含增删改查 导入导出等操作)
2012-02-27 14:32 5011最近项目又用到ext 比较 ... -
tree拖拽
2011-09-04 22:09 2430当时遇到如下问题: 拖拽A tree 的a节点到B tree ... -
ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)源代码
2011-08-11 14:56 1102ExtJS Web应用程序开发指南(第2版)(针对Ext JS ... -
通过拖拽Grid改变行的顺序
2010-10-08 13:06 3770<script> var meta ... -
使用注解和反射构造ext的grid需要的列模型
2010-09-18 12:03 1680注解类: package xzd; import ... -
ExtJs Grid分页时序号自增的实现
2010-08-23 16:28 3056首先看到网上都是类似 http://www.blogjava. ... -
extjs 自己的小小总结
2010-08-13 21:15 3299总结自己的代码 可能以后会用到 记录一下 方便以后查阅 1 ... -
eclipse 中怎样来集成 JBOSS
2010-08-09 08:46 0eclipse 中怎样来集成 JBOSS -
ext2,3,和4 版本 只显示年月的日期插件
2010-08-03 20:23 15690Ext技术交流群:164648099 1:ext3版本 ... -
关于Extjs3.0中的TreeGrid (Ext.ux.maximgb.tg.EditorGridPanel)(转)
2010-08-01 21:38 4352转:(http://www.liyonghome.cn/ind ... -
ext grid 单元格提示 出现图片
2010-07-31 00:03 2655代码简单 只是记录一下 <html> ... -
ext tree相关知识
2010-07-30 23:53 2611ext tree 动态修改各个节点名称icon小图标 &qu ... -
ext 后台查数据库数据拼装tree数据
2010-07-26 22:21 2481来自:Extjs交流群(164648099) 说明: ...
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
Extjs 5 学习笔记,在网上下载整理好的。
这里接口的意思是Observable实际上...我前面的一篇文章 补点基础:Javascript中的类和闭包 也是为这篇做准备。另外,博客园内还有一个写的很好的系列 JavaScript继承详解. 他主要是根据Douglas Crockford的两篇文章写的
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4...
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
非常适合新手学习extjs的笔记,让你少走弯路
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
老师整理的extjs学习笔记,和大家共享
extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础extjs基础
学习ExtJS时看书的笔记,记录了ExtJS事件机制的原理