ExtJs4组件中initComponent方法介绍以及为什么要使用

页面导航:首页 > 网络编程 > JavaScript > ExtJs4组件中initComponent方法介绍以及为什么要使用

ExtJs4组件中initComponent方法介绍以及为什么要使用

来源: 作者: 时间:2016-02-04 09:15 【

我们知道,Ext的UI组件有一个initCompent()方法。这个方法定义在UI组件顶级类Component中,在Component的构造函数中会调用它进行组件初始化操作。Component的子类都覆盖了initCompent方法,在不同
我们知道,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);

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

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<