原创翻译,欢迎纠错,转载请注明出处
2.在类中使用继承
我们在定义一个类时经常需要继承一个extjs已有的类或组件的一些功能,这样我们只需添加一些新的功能即可。
本文介绍了如何继承一个已有的类,并通过重新或者添加新方法来添加新功能。
我们将创建一个 Vehicle类,其由Manufacturer,Model,和Top Speed三个属性和一个travel方法组成,travel方法接受一个表示行驶距离的参数。当方法被调用时,他会显示vehicle的信息,行驶了多长具体,现在速度多少。
Ext.define('CookBook.Vehicle',{
config:{
manufacturer: 'Unknown Manufacturer',
model: 'Unknown Model',
topSpeed: 0
},
constructor:function(manufacturer,model,topSpeed){
this.initConfig();
if(manufacturer){
this.setManufacturer(manufacturer);
}
if(model){
this.setModel(model);
}
//topSpeed的类似,省略不写
},
travel:function(distance){
alert('The ' + this.getManufacturer() + ' ' + this.getModel() + 'travelled ' + distance + ' miles at ' + this.getTopSpeed() + 'mph');
}
),function(){
console.log("Vehicle class defined");
}
}
var vehicle = Ext.create('Cookbook.Vehicle', 'Aston Martin', 'Vanquish', 60);
vehicle.travel(100);
定义一个子类CookBook.Plane继承自Vehicle,并添加一个新属性maxAltitude。
Ext.define('Cookbook.Plane', {
extend: 'Cookbook.Vehicle',
config: {
maxAltitude: 0
},
constructor: function(manufacturer, model, topSpeed, maxAltitude){
this.initConfig();
if(maxAltitude){
this.setMaxAltitude(maxAltitude);
}
// call the parent class' constructor
this.callParent([manufacturer, model, topSpeed]);
}
}, function(){
console.log('Plane Class Defined!');
});
var plane = Ext.create('CookBook.Plane','Boeing','747',500,3000);
plane.travel(800);
工作原理:
extend参数告诉Ext类的继承预处理器继承的是哪个类,预处理器将此类得所有成员合并到新类的定义中,继承Vehicle类的图解如下所示:
callParent方法可以用来快速执行父类版本的方法,这个方法能保证父类的方法被执行,使得功能和我们预期一致。在Extjs4之前需执行
Plane.superclass.constructor.apply(this, arguments);
Extjs4的callParent方法也是调用了这句,不过callParent方法调用更加简单,易懂。
More
接下来我们将未Plane类添加一些新方法,并覆写travel方法。
//添加takeOff、land方法,并覆写travel方法,调用takeOff和land
Ext.define('Cookbook.Plane', {
...
takeOff: function(){
alert('The ' + this.getManufacturer() + ' ' + this.getModel()
+ ' is taking off.');
},
land: function(){
alert('The ' + this.getManufacturer() + ' ' + this.getModel()
+ ' is landing.');
}
travel: function(distance){
this.takeOff();
// execute the base class’ generic travel method
this.callParent(arguments);
alert('The ' + this.getManufacturer() + ' ' + this.getModel() + ' flew at an altitude of ' + this.getMaxAltitude() + 'feet');
this.land();
}
...
});
这里最重要的方法就是callParent,通过它可以执行父类的travel方法,注意其传的argument参数是所有js函数都存在的一个变量,其中保存了当前函数的所有参数。
var plane = Ext.create('Cookbook.Plane', 'Boeing', '747', 500, 30000);
plane.travel(800); // alerts 'The Boeing 747 is taking off'
// 'The Boeing 747 travelled 800 miles at 500mph'
// 'The Boeing 747 flew at an altitude of 30000 feet'
// 'The Boeing 747 is landing.'
- 大小: 13.1 KB
分享到:
相关推荐
Ext JS 4 Web Application Development Cookbook by Andrew Duncan and Stuart Ashworth (Aug 24, 2012) $49.99 Paperback Order in the next 11 hours and get it by Tuesday, Mar 19. More Buying Choices - ...
ExtJS4.Web.Application.Development.Cookbook.2012
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid...
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---...
21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) ...
从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从ExtJs5开始则引入了MVVC架构。 从网上资料来看,多数都是停留在ExtJs3...
extjs4 web应用程序开发指南源代码,国内首本
Extjs 5 学习笔记,在网上下载整理好的。
一本非常好的extjs教程,Extjs 3.0 cookbook
exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net
21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) ...
ExtJS Web应用程序开发指南(第2版)对EXTJS4.0深入讲解,免责声明,只有前3章内容(extjs 4.0)
自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,
Extjs_Web应用开发指南第二版(针对4.0更新)及源代码
extjs3 cookbook 一本非常好的extjs教程
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
ExtJs4+Web参考项目 EXTJS4 WEB开发 EXT EXTJS EXT4