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/ 下载以后的目录结构: 先写一个入门的程序吧自定义 ...
随机推荐
- RMI(Remote Method Invocation ) 概念恢复
1.RMI是远程方法调用的简称,像其名称暗示的那样,它能够帮助我们查找并执行远程对象,通俗的说,远程调用就像一个class放在A机器上,然后在B机器中调用这个class的方法. 2.EMI术语 在研究 ...
- Activity(活动)生命周期(3)--活动的生存期
Activity类中定义了7中回调方法,覆盖了活动生命周期的每一个环节. 回调方法: 1.onCreate() 这个方法会在活动第一次被创建的时候调用.我们应该在这个方法中完成活动的初始化操作,比如: ...
- SSL 认证之后,request.getScheme()获取不到https的问题记录
通过浏览器输入https://www.xxx.com,request.getScheme()获取到的确实http而不是https通过request.getRequestURL()拿到的也是http:/ ...
- Manthan, Codefest 16 D. Fibonacci-ish 暴力
D. Fibonacci-ish 题目连接: http://www.codeforces.com/contest/633/problem/D Description Yash has recently ...
- OpenVPN设置客户端固定IP
在使用openvpn的过程中,多台客户端连接上同一台openvpn服务器之后,客户端的的IP地扯经常变动,导致客户端之间无法正常通讯,openvpn的版本变动也导致了固定IP地扯的配置不同,用以下方法 ...
- Spring MVC常用注解@PathVariable、@RequestHeader、@CookieValue、@RequestParam、@RequestBody、@SessionAttributes、@ModelAttribute
简介: handler method参数绑定常用的注解,我们根据他们处理的Request的不同内容部分分为四类:(主要讲解常用类型) A.处理requet uri部分(这里指uri template中 ...
- Jquery 一次处理多个ajax请求的代码
Jquery 一次处理多个ajax请求的代码,需要的朋友可以参考下. 复制代码代码如下: $(document).ready(function () { $('#getsetgo').click( ...
- 方差分析anova
方差分析 参考:http://wiki.mbalib.com/wiki/%E6%96%B9%E5%B7%AE%E5%88%86%E6%9E%90 方差分析(Analysis of Variance, ...
- etcd,Docker问题汇总
单节点etcd publish error 正在愉快的进行jenkins流程,突然发现etcd连接不上去了.重新reboot后发现日志publish error Oct :: k8s-master e ...
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ...