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. });

如何使用：

1. var myWindow = Ext.create('My.own.Window', {
2. title: 'Hello World',
3. bottomBar: {
4. height: 60
5. }
6. });
8. alert(myWindow.getTitle()); // alerts "Hello World"
10. myWindow.setTitle('Something New');
12. alert(myWindow.getTitle()); // alerts "Something New"
14. myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"
16. 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?

1. Ext.define('Computer', {
2. statics: {
3. instanceCount: 0,
4. factory: function(brand) {
5. // 'this' in static methods refer to the class itself
6. return new this({brand: brand});
7. }
8. },
10. config: {
11. brand: null
12. },
14. constructor: function(config) {
15. this.initConfig(config);
17. // the 'self' property of an instance refers to its class
18. this.self.instanceCount ++;
20. return this;
21. }
22. });
24. var dellComputer = Computer.factory('Dell');
25. var appleComputer = Computer.factory('Mac');
27. alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"
29. 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. });

转载于:https://www.cnblogs.com/dwfbenben/archive/2012/03/22/2412505.html