(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(原型) :实现继承
//SupClass
var Person = function(name){
this.name = name;
};
//alert(Person.prototype.constructor); //原型对象的构造器,默认是当前的类的模板
//SupClass prototype object
Person.prototype = {
constructor:Person ,
id:100
}; //SubClass
var 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);
});

实例结果:

ExtJS学习------Ext.define的继承extend,用javascript实现相似Ext的继承的更多相关文章

  1. Extjs 学习总结-Ext.define自定义类

    本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...

  2. ExtJs 学习之开篇(-)之define

    Ext.onReady(function(){    /**     * test1,声明一个类,定义类中的方法     */ Ext.define("demo.Demo",{   ...

  3. ExtJS 4.2 教程-03:使用Ext.define自定义类

    转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-3-define-classes ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4. ...

  4. Extjs学习笔记--(四,基本函数介绍)

    Ext是Extjs的命名空间,为Extjs框架提供唯一的全局变量 这样做可以避免冲突,便于代码维护 1,apply和applyif方法 apply=function(object, config, d ...

  5. Extjs学习笔记--(二)

    1.配置实用Extjs <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" /&g ...

  6. ExtJS学习笔记:定义extjs类别

    类的定义 Ext.define('Cookbook.Vehicle', { Manufacturer: 'Aston Martin', Model: 'Vanquish', getDetails: f ...

  7. ExtJS4中Ext.onReady、Ext.define、Ext.create

    1.Ext.onReady 说明:onReady内的语句块会在页面上下文加载后再执行. 2.Ext.define 说明:创建类,可以继承其他类,也可以被继承. 例子1: 1 <script ty ...

  8. ExtjS学习--------Ext.define定义类

    Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和演 ...

  9. ExtJS学习(一)Ext自定义类实现

    工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了.以后回忆起来也方便. 首先下载extjs官网地址:http://extjs.org.cn/ 下载以后的目录结构: 先写一个入门的程序吧自定义 ...

随机推荐

  1. Problem B: 零起点学算法92——元素前移1位

    #include<stdio.h> int main() { ],b[]; while(scanf("%d",&n)!=EOF) { ;i<n;i++) ...

  2. 8VC Venture Cup 2016 - Elimination Round C. Block Towers 二分

    C. Block Towers 题目连接: http://www.codeforces.com/contest/626/problem/C Description Students in a clas ...

  3. oracle client PLSQL配置

    date:20140525auth:Jin platform :windows 一.服务端启动服务和创建账号# su - oracle$ lsnrctl start$ sqlplus / as sys ...

  4. Ubuntu 16.04安装KVM

    说明:其实之前我有安装过KVM,只是但是不知道这个就是KVM,而当时只知道叫做QEMU虚拟机. 安装: http://www.cnblogs.com/EasonJim/p/7215836.html h ...

  5. POJ 3680 Intervals(费用流)

    Intervals Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 5762   Accepted: 2288 Descrip ...

  6. 网络数据包分析 网卡Offload

    http://blog.nsfocus.net/network-packets-analysis-nic-offload/     对于网络安全来说,网络传输数据包的捕获和分析是个基础工作,绿盟科技研 ...

  7. delphi 杀死进程

    http://blog.sina.com.cn/s/blog_554b1f1b0100aygo.html unit Tlhelp323; interface uses  Windows,SysUtil ...

  8. GridControl事件

    private void gridView1_RowCellClick(object sender, DevExpress.XtraGrid.Views.Grid.RowCellClickEventA ...

  9. zxing生成二维码和读取二维码

    当然,首先要导入zxing的jar包. 生成二维码代码: package com.imooc.zxing; import java.io.File; import java.nio.file.Path ...

  10. 剖析ASP.NET Core(Part 3)- UseMvc(译)

    原文:https://www.stevejgordon.co.uk/asp-net-core-anatomy-part-3-addmvc 发布于:2017年4月环境:ASP.NET Core 1.1 ...