首页 > 代码库 > ExtJs4组件中initComponent方法介绍以及为什么要使用this.callParent();

ExtJs4组件中initComponent方法介绍以及为什么要使用this.callParent();

2024-10-24 11:00:02   209人阅读

我们知道，Ext的UI组件有一个initCompent()方法。
这个方法定义在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);

这种写法有几个弊端：
  1. 类名要内置到函数代码模块中，如果一旦修改类名，就非常麻烦
  2. 每次的调用都要写一长串代码，有时候为了省事复制粘贴，忘记改类名，就会出错
  3. 有时候需要传参，使用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');
    }  
});


ExtJs4组件中initComponent方法介绍以及为什么要使用this.callParent();


联系
我们