extjs学习与进阶

一、先认识一下

extjs的面向对象技术  点击打开链接构建 Ext JS 扩展和插件

二、接着来讨论下作用域 ：

第一个能成功触发，但第二个用了this却没起作用

 

 

 

2013-08-10 13:54

提问者采纳

第二个this指的是当前id为'viewAll‘的对象

追问：

我想用那个changeListAll方法该怎么办才行？

追答：

可以直接写成这样hanlder: function(){}，把changeListAll的方法体直接写在里边，如果该方法要复用的话就用上边第一种方式，声明为全局的一个方法

追问：

这样做不太妥当。有个scope属性可以把this的范围改掉，只是我不太理解用法。我还是希望用上图片里的用法，因为系统比较大，要写得规范点

追答：

其实这里的这个hanlder无非就是直接声明匿名函数和调用全局函数两种，它的scope属性是规定了此函数的运行环境，是在window底下还是tool自己底下，其实就是为了访问其他成员而已，举个例子var a = { b: 'a.b'};Ext.create('Ext.Button', {    text: 'Click me',    renderTo: Ext.getBody(),    scope: a,    handler: function(){alert(this.b)},    b: 'this.b'});当你设置scope为a时，则button的hanlder函数的执行环境为a对象，则可以再handler中访问a对象的成员，如上边this.b则输出’a.b'当你不设置scope的时候默认handler的执行环境为button，则在方法体重输出‘this.b'希望能帮到你

追问：

嗯。谢谢，大概明白了，js里面还有这样一段

为什么 tools的handler能成功调用到changeSubject方法呢，我的scope却不能调用到。

追答：

首先，extjs的button默认的scope是button自身也就是它把当前的this的引用指向了button自身，但是不同情况下this代表的对象不一定相同，举例来说上边initCommponent中的this代表了panel，而你的tool是在initComponent中声明的，所以他的执行环境还是this即panel，这时候你将tool中组件的scope声明为this就可以访问到panel中定义的方法而你最开始的时候hanlder:_a的时候为什么可以调用_a,是因为当前this的引用是window（因为你的Ext.create是在最外边也就是window环境下调用的）所以可以访问到这个全局的_a方法所以需要明白scope默认的this引用是谁，而当前的this又是谁是最关键的

三、来认识下prototype

prototype其实并不是EXTJS中的专有术语，它在js（javascript）中也是存在的，prototype可以译为原型对象，它的作用是返回对象类型的原型引用。具体例子来说：function TestObject(name) {     this.m_Name = name; } TestObject.prototype.ShowName = function() {     alert(this.m_Name); }; 上边的程序代码是js代码，它给TestObject对象的prototype赋值了一个新的属性ShowName，而该属性是一个函数，这样我们就可以使用TestObject对象的ShowName属性了。其他它的主要作用就是给对象原型添加新的属性和方法来满足自己的程序需求的！

四、接着认识下

ExtJs4组件中initComponent方法介绍以及为什么要使用this.callParent();
投稿
我们知道，Ext的UI组件有一个initCompent()方法。这个方法定义在UI组件顶级类Component中，在Component的构造函数中会调用它进行组件初始化操作。Component的子类都覆盖了initCompent方法，在不同的层级上做了不同的处理。举个例子，从Window一直
到Conponent，会形成这样一个调用链条。
 
从图中可以看到初始化当前组件的时候，要从最顶端组件开始初始化，每个组件都承担了构建最终组件的任务。
 
看到这里我们不禁发出疑问，怎么在调用当前组件的initComponent方法前还去调用下父类的呢？
 
学过java的同学都知道，java如果想在当前方法调用父类的同名方法，可以super.方法名（）；
首先介绍下Ext3是怎么处理的
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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那样呢
 
?
1
2
3
4
5
6
public MyClass2 extends MyClass1{  
    public void say() {  
        super.say();  
        System.out.println('MyClass2 say hello world!');  
    }  
}
ExtJs4就完美解决了
 
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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');
    }  
});