extjs中的Config及Mixins概念（转）

Extjs 4中，为类型系统引入了Config概念，Config就是配置项的意思，用{configItem1:value1...}表示；

在对象构造的时候，会调用this.initConfig(config)将配置项初始化，每个配置项自动生成4个函数：get set reset apply。

1. Ext.define('My.own.Window', {
2. /** @readonly */
3. isWindow: true,
5. config: {
6. title: 'Title Here',
8. bottomBar: {
9. enabled: true,
10. height: 50,
11. resizable: false
12. }
13. },
15. constructor: function(config) {
16. this.initConfig(config);
18. return this;
19. },
21. applyTitle: function(title) {
22. if (!Ext.isString(title) || title.length === 0) {
23. alert('Error: Title must be a valid non-empty string');
24. }
25. else {
26. return title;
27. }
28. },
30. applyBottomBar: function(bottomBar) {
31. if (bottomBar && bottomBar.enabled) {
32. if (!this.bottomBar) {
33. return Ext.create('My.own.WindowBottomBar', bottomBar);
34. }
35. else {
36. this.bottomBar.setConfig(bottomBar);
37. }
38. }
39. }
40. });

如何使用：

var myWindow = Ext.create('My.own.Window', {  
    title: 'Hello World',  
    bottomBar: {  
        height: 60  
    }  
});  
  
alert(myWindow.getTitle()); // alerts "Hello World"  
  
myWindow.setTitle('Something New');  
  
alert(myWindow.getTitle()); // alerts "Something New"  
  
myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"  
  
myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100  
var myWindow = Ext.create('My.own.Window', {
    title: 'Hello World',
    bottomBar: {
        height: 60
    }
});

alert(myWindow.getTitle()); // alerts "Hello World"

myWindow.setTitle('Something New');

alert(myWindow.getTitle()); // alerts "Something New"

myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"

myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100

3. 静态

使用statics定义静态成员

[javascript] view plaincopyprint?
Ext.define('Computer', {  
    statics: {  
        instanceCount: 0,  
        factory: function(brand) {  
            // 'this' in static methods refer to the class itself  
            return new this({brand: brand});  
        }  
    },  
  
    config: {  
        brand: null  
    },  
  
    constructor: function(config) {  
        this.initConfig(config);  
  
        // the 'self' property of an instance refers to its class  
        this.self.instanceCount ++;  
  
        return this;  
    }  
});  
  
var dellComputer = Computer.factory('Dell');  
var appleComputer = Computer.factory('Mac');  
  
alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"  
  
alert(Computer.instanceCount); // Alerts "2"  
Ext.define('Computer', {
    statics: {
        instanceCount: 0,
        factory: function(brand) {
            // 'this' in static methods refer to the class itself
            return new this({brand: brand});
        }
    },

    config: {
        brand: null
    },

    constructor: function(config) {
        this.initConfig(config);

        // the 'self' property of an instance refers to its class
        this.self.instanceCount ++;

        return this;
    }
});

var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');

alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

alert(Computer.instanceCount); // Alerts "2"

新概念，相当于调用Ext.apply(this,other)将other类中的方法合并到当前的类中，也相当于另一种形式的继承。

下面用代码测试一下，使用了Siesta测试框架，有兴趣可以google一下，很强大的测试系统。

Js代码

1. StartTest(function(t) {
2. t.diag("Extjs common test");
3. t.ok(Ext,"Ext is here");
4. Ext.define("test.Talk",
5. {
6. talk:function()
7. {
8. return 'talk'
9. }
10. }
11. );
12. Ext.define("test.Person",
13. {
14. mixins:
15. {
16. everyOneNeedTalk:"test.Talk"
17. }
18. });
19. var p = Ext.create("test.Person");
20. t.is('talk',p.talk(),'The method is mixin')
22. Ext.define("test.Student",{
23. config:{
24. gender:'boy'
25. },
26. constructor:function(config){
27. this.initConfig(config);
28. //这里需要调用initConfig，否则不会自动生成getter 和 setter
29. }
30. });
31. var s = Ext.create('test.Student')
32. t.is(s.getGender(),'boy','generate getter')
33. s.setGender('girl');
34. t.is(s.getGender(),'girl','generate setter')
36. t.done(); // Optional, marks the correct exit point from the test
37. });