Extjs4.0 之Ext.Class 属性详解 (alias/mixins /uses/requires/singleton等属性)

Ext.Class 属性详解 :


1 ,  alias : 相当于别名一样,可以起多个,可以通过xtype和Ext.widget()创建实例:

Js代码  
Ext.define('SimplePanel', {   
    extend: 'Ext.panel.Panel',   
    alias: ['widget.simplepanel_007','widget.simplepanel_008'],   
        title: 'Yeah!'  
});   
  
//通过Ext.widget()创建实例   
Ext.widget('simplepanel_007',{   
    width : 100,   
    height : 100   
}).render(Ext.getBody());   
  
//通过xtype创建   
Ext.widget('simplepanel_007', {   
    width : 100,   
    items: [   
        {xtype: 'simplepanel_008', html: 'Foo'},   
        {xtype: 'simplepanel_008', html: 'Bar'}   
    ]   
}).render(Ext.getBody());  

Ext.define('SimplePanel', {
        extend: 'Ext.panel.Panel',
        alias: ['widget.simplepanel_007','widget.simplepanel_008'],
        title: 'Yeah!'
});

//通过Ext.widget()创建实例
Ext.widget('simplepanel_007',{
        width : 100,
        height : 100
}).render(Ext.getBody());

//通过xtype创建
Ext.widget('simplepanel_007', {
        width : 100,
        items: [
                {xtype: 'simplepanel_008', html: 'Foo'},
                {xtype: 'simplepanel_008', html: 'Bar'}
        ]
}).render(Ext.getBody());
2 , alternateClassName : 跟alias有点类似,相当于给类找替身,可以多个,可以通过Ext.create()创建实例:

Js代码  
Ext.define('Boy', {   
       //定义多个替身   
       alternateClassName: ['boy2', 'boy3'],   
       say : function(msg){   
        alert(msg);   
    }   
});   
               
var boy1 = Ext.create('Boy');   
boy1.say('I am boy1...');   
  
//可以通过alternateClassName实例化该类   
var boy2 = Ext.create('boy2');   
boy2.say('I am boy2...');   
  
var boy3 = Ext.create('boy3');   
boy3.say('I am boy3...');  

Ext.define('Boy', {
       //定义多个替身
       alternateClassName: ['boy2', 'boy3'],
       say : function(msg){
                alert(msg);
        }
});
                       
var boy1 = Ext.create('Boy');
boy1.say('I am boy1...');

//可以通过alternateClassName实例化该类
var boy2 = Ext.create('boy2');
boy2.say('I am boy2...');

var boy3 = Ext.create('boy3');
boy3.say('I am boy3...');
3 , config:类的属性配置,属性可以自动生成geter/seter方法

Js代码  
Ext.define('Boy', {   
    config : {   
        name : 'czp',   
        age : 25   
    },   
    constructor: function(cfg) {   
            this.initConfig(cfg);   
    }   
});   
               
var czp = Ext.create('Boy',{name:'czpae86'});   
//通过getName()方法获得属性name值   
alert(czp.getName());   
//通过setAge()方法改变属性age值   
czp.setAge(25.5);  

Ext.define('Boy', {
        config : {
                name : 'czp',
                age : 25
        },
        constructor: function(cfg) {
                        this.initConfig(cfg);
        }
});
                       
var czp = Ext.create('Boy',{name:'czpae86'});
//通过getName()方法获得属性name值
alert(czp.getName());
//通过setAge()方法改变属性age值
czp.setAge(25.5);
4 , extend : 继承,可以继承单个类

Js代码  
Ext.define('Person', {   
    say: function(text) { alert(text); }   
});   
Ext.define('Boy', {   
    extend : 'Person'  
});   
               
var czp = Ext.create('Boy');   
//继承了Person,所以可以使用say()方法   
czp.say('my name is czp.');  

Ext.define('Person', {
        say: function(text) { alert(text); }
});
Ext.define('Boy', {
        extend : 'Person'
});
                       
var czp = Ext.create('Boy');
//继承了Person,所以可以使用say()方法
czp.say('my name is czp.');
5 , inheritableStatics : 定义静态方法,可以通过"类名.方法名"调用静态方法. 类似 statics属性,
区别是:子类也可以使用该静态方法,但statics属性定义的静态方法子类是不会继承的.
Js代码  
Ext.define('Person', {   
    inheritableStatics : {   
        sleep : function(){   
            alert('sleep');   
        }   
    },   
    say: function(text) { alert(text); }   
});   
  
Ext.define('Boy', {   
    extend : 'Person'  
});   
  
//子类可以通过"类名.方法名"调用父类通过"inheritableStatics"定义的方法   
Boy.sleep();  

Ext.define('Person', {
        inheritableStatics : {
                sleep : function(){
                        alert('sleep');
                }
        },
        say: function(text) { alert(text); }
});

Ext.define('Boy', {
        extend : 'Person'
});

//子类可以通过"类名.方法名"调用父类通过"inheritableStatics"定义的方法
Boy.sleep();
6 , mixins : 可以实现多继承

Js代码  
Ext.define('Person', {   
    say: function(text) { alert(text); }   
});   
  
Ext.define('Boy', {   
    play : function(){   
        alert('play');   
    }   
});   
  
Ext.define('Gird', {   
    sleep : function(){   
        alert('sleep');   
    }   
});   
               
Ext.define('A_007', {   
    //继承Person   
    extend : 'Person',   
    //同时继承'Boy','Gird'   
    mixins : ['Boy','Gird']   
});   
               
var a_007 = new A_007();   
a_007.say('我可以say,也可以play,还可以sleep!!');   
a_007.play();   
a_007.sleep();  

Ext.define('Person', {
        say: function(text) { alert(text); }
});

Ext.define('Boy', {
        play : function(){
                alert('play');
        }
});

Ext.define('Gird', {
        sleep : function(){
                alert('sleep');
        }
});
                       
Ext.define('A_007', {
        //继承Person
        extend : 'Person',
        //同时继承'Boy','Gird'
        mixins : ['Boy','Gird']
});
                       
var a_007 = new A_007();
a_007.say('我可以say,也可以play,还可以sleep!!');
a_007.play();
a_007.sleep();  
7 , singleton : 创建单例模式的类, 如果singleton为true,那么该类不能用通过new创建,也不能被继承

Js代码  
Ext.define('Logger', {   
    //singleton为true   
    singleton: true,   
    log: function(msg) {   
        alert(msg);   
    }   
});   
//方法调用"类名.方法名"   
Logger.log('Hello');  

Ext.define('Logger', {
        //singleton为true
        singleton: true,
        log: function(msg) {
                alert(msg);
        }
});
//方法调用"类名.方法名"
Logger.log('Hello');
8 , statics : 与第5个inheritableStatics属性类似,statics属性定义的静态方法子类是不会继承的.请看第5个属性.

9 , uses 和 requires : 与requires属性类似,都是对某些类进行引用
uses -- 被引用的类可以在该类之后才加载.
requires -- 被引用的类必须在该类之前加载.

Js代码  
Ext.define('Gird', {   
    uses : ['Boy'],   
    getBoy : function(){   
        return Ext.create('Boy');   
    },   
    sleep : function(){   
        alert('sleep');   
    }   
});   
  
//对于uses属性,Boy类放在后面是可以的,不会报错   
Ext.define('Boy', {   
        play : function(){   
               alert('play');   
        }   
});   
  
  
//对于requires属性,Boy类必须在Grid类之前加载,不然会报错   
Ext.define('Boy', {   
    play : function(){   
        alert('play');   
    }   
});   
               
Ext.define('Gird', {   
    requires : ['Boy'],   
    getBoy : function(){   
        return Ext.create('Boy');   
    },   
    sleep : function(){   
        alert('sleep');   
    }   
});  

Ext.define('Gird', {
        uses : ['Boy'],
        getBoy : function(){
                return Ext.create('Boy');
        },
        sleep : function(){
                alert('sleep');
        }
});

//对于uses属性,Boy类放在后面是可以的,不会报错
Ext.define('Boy', {
        play : function(){
               alert('play');
        }
});


//对于requires属性,Boy类必须在Grid类之前加载,不然会报错
Ext.define('Boy', {
        play : function(){
                alert('play');
        }
});
                       
Ext.define('Gird', {
        requires : ['Boy'],
        getBoy : function(){
                return Ext.create('Boy');
        },
        sleep : function(){
                alert('sleep');
        }
});  

推荐链接
见证又一个准百万富翁的诞生！
3G培训就业月薪平均7K+，不3K就业不花一分钱！
20-30万急聘多名天才Java/MTA软件工程师