ExtJs4组件中initComponent方法介绍以及为什么要使用this.callParent();
这个方法定义在UI组件顶级类Component中,在Component的构造函数中会调用它进行组件初始化操作。
Component的子类都覆盖了initCompent方法,在不同的层级上做了不同的处理。举个例子,从Window一直
到Conponent,会形成这样一个调用链条。
从图中可以看到初始化当前组件的时候,要从最顶端组件开始初始化,每个组件都承担了构建最终组件的任务。
看到这里我们不禁发出疑问,怎么在调用当前组件的initComponent方法前还去调用下父类的呢?
学过java的同学都知道,java如果想在当前方法调用父类的同名方法,可以super.方法名();
首先介绍下Ext3是怎么处理的
MyClass1 = function(){} MyClass1.prototype={ say:function(){ console.log('hello1'); } } MyClass2 = Ext.extend(MyClass1,{ say:function(){ MyClass2.superclass.say.call(this); console.log('hello2'); } }); //每次子类需要调用超类方法,都要像下面这样写: MyClass2.superclass.say.call(this);
这种写法有几个弊端:
- 类名要内置到函数代码模块中,如果一旦修改类名,就非常麻烦
- 每次的调用都要写一长串代码,有时候为了省事复制粘贴,忘记改类名,就会出错
- 有时候需要传参,使用call与apply调用用法不统一
如何做到像java那样呢
public MyClass2 extends MyClass1{ public void say() { super.say(); System.out.println('MyClass2 say hello world!'); } }ExtJs4就完美解决了
Ext.define('MyClass1',{ say: function(){ console.log('hello1'); } }) Ext.define('MyClass2',{ extend:'MyClass1', say: function(){ this.callParent(); // 调用父类的say() // 如果要为父类方法传参,只需要像下面这样写 //this.callParent(arguments); //this.callParent([param1, param2]); console.log('hello2'); } }); Ext.define('MyClass3',{ extend:'MyClass2', say: function(){ this.callParent(); // 调用父类的say() // 如果要为父类方法传参,只需要像下面这样写 //this.callParent(arguments); //this.callParent([param1, param2]); console.log('hello3'); } });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。