ExtJS学习------Ext.define的继承extend，用javascript实现相似Ext的继承

（1）Ext.define的继承extend

详细实例：

Ext.onReady(function(){//Sup Class 父类Ext.define('Person',{config:{name:'bjsxt'} ,constructor:function(config){var me = this ;me.initConfig(config);}});//Sub Class 子类Ext.define('Boy',{//使用Ext的继承extend:'Person',//直接继承config:{sex:'男',age:20}});var b = Ext.create('Boy',{name:'张三',age:25});alert('姓名：'+b.name+'--性别:'+b.sex+'--年龄:'+b.age);
});

实例结果：

（2）使用javascript实现类似Ext的继承

实例：

Ext.onReady(function(){//javascript : prototype(原型)  :实现继承//SupClassvar Person = function(name){this.name = name; };//alert(Person.prototype.constructor);       //原型对象的构造器,默认是当前的类的模板//SupClass prototype objectPerson.prototype = {constructor:Person ,id:100};//SubClassvar Boy = function(name,sex,age){//借用构造函数继承的方式Person.call(this,name);this.sex = sex ;this.age = age ;};//实现原型继承: 继承了父类的模板和父类的原型对象//Boy.prototype = new Person();//自己实现extend的方法function myextend(sub , sup){var F = function() {},      //定义一个空函数做为中转函数subclassProto,           //子类的原型对象//把父类的原型对象 交给了superclassProto变量    superclassProto = sup.prototype;// 做中转的位置：把父类的原型对象 赋值给了 F这个空函数的原型对象//进行原型继承
F.prototype = superclassProto;
subclassProto = sub.prototype = new F();  subclassProto.constructor = sub;       //还原构造器sub.superclass = superclassProto;       //做了一个保存,保存了父类的原型对象//目的是为了防止你大意了if (superclassProto.constructor === Object.prototype.constructor) {superclassProto.constructor = sup;}  };myextend(Boy ,Person);//自己实现的继承方法var b = new Boy('李四','男',25);///* 注：传统的javascript方法实现继承* Boy.prototype=new Person('李四');* var b=new Boy('男',25);*/alert('姓名：'+b.name+'--性别:'+b.sex+'--id:'+b.id+'--年龄:'+b.age);
});

实例结果：

转载于:https://www.cnblogs.com/claireyuancy/p/6739161.html

ExtJS学习------Ext.define的继承extend，用javascript实现相似Ext的继承相关推荐

浅谈javascript继承【读javascript设计模式第四章节继承有感】
javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的一:类似继承,先上关键代码 ...
extlink.php,ExtJs 学习笔记基础篇 Ext组件的使用_extjs
昨天刚接触到Extjs,简单写了篇学习笔记,今天继续. 天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要 ...
Ext.extend 与 Ext.define
转自:http://www.cnblogs.com/CoolHu/archive/2012/11/28/2792803.html SysPanel = function(config) {config ...
ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习（实例）
经常使用事件: 其它重要方法: 详细实例:(实例结果能够将相应的代码取消凝视进行測试) Ext.onReady(function(){Ext.create('Ext.panel.Panel',{tit ...
前端extjs学习之旅（1）
从上周正式开始学习Extjs.刚开始看老大推荐的Extjs in action英文版,边看边敲代码,虽然都是一些简单小程序,但是看着它跑起来还是很欢脱.但是,第一次通过英文书学技术的我感到非常痛恨英语 ...
ExtJS学习：MVC模式案例（三）
在ExtJS案例系列教程的前两讲,我们了解了该案例的最终实现效果,并且在ExtJS学习:MVC模式案例(二)中我们添加Viewport.js和demoController.js两个文件,实现了对整个网 ...
ExtJS学习之路第三步：理解引擎之下,ExtJS4中的类
写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码. Classes in Ext JS 4: Under the hood Countdown to Ex ...
Extjs学习数据模型Molde
数据模型基本要讲三大部分 model proxy store 1．普通Molde的创建数据模型对真实世界中对事物在系统中的反应 Extjs4.0中的model相当于DB中的table,或ja ...
Extjs学习笔记--（五，事件）
Extjs中事件包括浏览器事件(单机按钮,鼠标移动等触发)和内部事件(组件之间的联动) 绑定浏览器事件的过程Ext.EventManager 要为元素绑定事件,通常会使用EventManager.on ...
ExtJS学习笔记3：载入、提交和验证表单
载入数据 1.比較好用的设置form数据的方法: formPanel.getForm().setValues([{id: 'FirstName', value: 'Joe'}]); 当中id值为for ...

ExtJS学习------Ext.define的继承extend，用javascript实现相似Ext的继承

ExtJS学习------Ext.define的继承extend，用javascript实现相似Ext的继承相关推荐

最新文章

热门文章