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(原型) :实现继承
//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的继承的更多相关文章
- Extjs 学习总结-Ext.define自定义类
本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...
- ExtJs 学习之开篇(-)之define
Ext.onReady(function(){ /** * test1,声明一个类,定义类中的方法 */ Ext.define("demo.Demo",{ ...
- ExtJS 4.2 教程-03:使用Ext.define自定义类
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-3-define-classes ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4. ...
- Extjs学习笔记--(四,基本函数介绍)
Ext是Extjs的命名空间,为Extjs框架提供唯一的全局变量 这样做可以避免冲突,便于代码维护 1,apply和applyif方法 apply=function(object, config, d ...
- Extjs学习笔记--(二)
1.配置实用Extjs <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" /&g ...
- ExtJS学习笔记:定义extjs类别
类的定义 Ext.define('Cookbook.Vehicle', { Manufacturer: 'Aston Martin', Model: 'Vanquish', getDetails: f ...
- ExtJS4中Ext.onReady、Ext.define、Ext.create
1.Ext.onReady 说明:onReady内的语句块会在页面上下文加载后再执行. 2.Ext.define 说明:创建类,可以继承其他类,也可以被继承. 例子1: 1 <script ty ...
- ExtjS学习--------Ext.define定义类
Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和演 ...
- ExtJS学习(一)Ext自定义类实现
工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了.以后回忆起来也方便. 首先下载extjs官网地址:http://extjs.org.cn/ 下载以后的目录结构: 先写一个入门的程序吧自定义 ...
随机推荐
- Largest Smallest Cyclic Shift
Largest Smallest Cyclic Shift 题目来源: Atcoder Code Festival 2017 Qual B Problem F 题目大意: 有\(X\)个字符'a',\ ...
- 通过win下的eclipse连接虚拟机中伪分布的hadoop进行调试
VMware虚拟机配置Ubuntu桥接方式(Bridged)使虚拟机和宿主机能互相ping通, 通过win下的eclipse连接虚拟机中伪分布的hadoop进行调试 1.设置Bridged上网方式 V ...
- 1.创建spring cloud父工程和子模块
创建父工程 idea创建父工程 idea创建一个工程.父工程管理公共资源 添加子模块 选择添加到父工程里面spring_cloud_parent 相应的子模块添加到父工程的pom.xml文件里
- js的执行环境及作用域
主要的是执行环境和作用域链. 执行环境 执行环境定义了变量或函数有权访问的其他数据,每个函数都有一个执行环境,每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个变量对象中, ...
- Educational Codeforces Round 8 E. Zbazi in Zeydabad 树状数组
E. Zbazi in Zeydabad 题目连接: http://www.codeforces.com/contest/628/problem/D Description A tourist wan ...
- 新浪微博(t.sina)简单授权代码及API测试
http://www.eoeandroid.com/thread-53701-1-1.html package mobson.weiboku.view; import java.util.ArrayL ...
- web安全开发指南--权限管理
2.1 访问控制安全规则 1 访问控制必须只能在服务器端执行. 2 只通过session来判定用户的真实身份,避免使用其它数据域的参数(比如来自cookie.hidden域 ...
- Java并发包之闭锁/栅栏/信号量
二.同步工具类详解 1.Semaphore信号量:跟锁机制存在一定的相似性,semaphore也是一种锁机制,所不同的是,reentrantLock是只允许一个线程获得锁,而信号量持有多个许可(per ...
- 新公司官网项目优化实践(Vue)
入职后接手website-html和website-mobile项目,发现项目加载速度不太理想,于是结合自己之前的经验对项目做了优化.此篇文章主要记录这次优化详情. 原始项目:开发环境:website ...
- You must have a TTY to run sudo
1.方法一,给命令行添加tty ssh -t user@foo.com 2.使用sudo visudo修改配置: Defaults:user !requiretty 表示用户user使用sudo命令时 ...