善待自己,珍惜今天,恩泽他人,享受生活

不放弃任何解决困难的机会，人的一生就是解决困难的过程。 当我们走完一生才能说没有问题要解决了。 面对工作、生活上的压力，面对来自家庭、朋友、同事、上司等的困惑。 要排除万难，否则我们就会被万难排除！

博客园 首页 新随笔 联系 订阅 管理
Extjs4.0 之Ext.Class 属性详解 (alias/mixins /uses/requires/singleton等属性)转
 

Ext.Class 属性详解 :


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

Js代码 复制代码 收藏代码
  1. Ext.define('SimplePanel', {
  2. extend: 'Ext.panel.Panel',
  3. alias: ['widget.simplepanel_007','widget.simplepanel_008'],
  4. title: 'Yeah!'
  5. });
  7. //通过Ext.widget()创建实例
  8. Ext.widget('simplepanel_007',{
  9. width : 100,
  10. height : 100
  11. }).render(Ext.getBody());
  13. //通过xtype创建
  14. Ext.widget('simplepanel_007', {
  15. width : 100,
  16. items: [
  17. {xtype: 'simplepanel_008', html: 'Foo'},
  18. {xtype: 'simplepanel_008', html: 'Bar'}
  19. ]
  20. }).render(Ext.getBody());

2 , alternateClassName : 跟alias有点类似,相当于给类找替身,可以多个,可以通过Ext.create()创建实例:

Js代码 复制代码 收藏代码
  1. Ext.define('Boy', {
  2. //定义多个替身
  3. alternateClassName: ['boy2', 'boy3'],
  4. say : function(msg){
  5. alert(msg);
  6. }
  7. });
  9. var boy1 = Ext.create('Boy');
  10. boy1.say('I am boy1...');
  12. //可以通过alternateClassName实例化该类
  13. var boy2 = Ext.create('boy2');
  14. boy2.say('I am boy2...');
  16. var boy3 = Ext.create('boy3');
  17. boy3.say('I am boy3...');

3 , config:类的属性配置,属性可以自动生成geter/seter方法

Js代码 复制代码 收藏代码
  1. Ext.define('Boy', {
  2. config : {
  3. name : 'czp',
  4. age : 25
  5. },
  6. constructor: function(cfg) {
  7. this.initConfig(cfg);
  8. }
  9. });
  11. var czp = Ext.create('Boy',{name:'czpae86'});
  12. //通过getName()方法获得属性name值
  13. alert(czp.getName());
  14. //通过setAge()方法改变属性age值
  15. czp.setAge(25.5);

4 , extend : 继承,可以继承单个类

Js代码 复制代码 收藏代码
  1. Ext.define('Person', {
  2. say: function(text) { alert(text); }
  3. });
  4. Ext.define('Boy', {
  5. extend : 'Person'
  6. });
  8. var czp = Ext.create('Boy');
  9. //继承了Person,所以可以使用say()方法
  10. czp.say('my name is czp.');

5 , inheritableStatics : 定义静态方法,可以通过"类名.方法名"调用静态方法. 类似 statics属性,

区别是:子类也可以使用该静态方法,但statics属性定义的静态方法子类是不会继承的.

Js代码 复制代码 收藏代码
  1. Ext.define('Person', {
  2. inheritableStatics : {
  3. sleep : function(){
  4. alert('sleep');
  5. }
  6. },
  7. say: function(text) { alert(text); }
  8. });
  10. Ext.define('Boy', {
  11. extend : 'Person'
  12. });
  14. //子类可以通过"类名.方法名"调用父类通过"inheritableStatics"定义的方法
  15. Boy.sleep();

6 , mixins : 可以实现多继承

Js代码 复制代码 收藏代码
  1. Ext.define('Person', {
  2. say: function(text) { alert(text); }
  3. });
  5. Ext.define('Boy', {
  6. play : function(){
  7. alert('play');
  8. }
  9. });
  11. Ext.define('Gird', {
  12. sleep : function(){
  13. alert('sleep');
  14. }
  15. });
  17. Ext.define('A_007', {
  18. //继承Person
  19. extend : 'Person',
  20. //同时继承'Boy','Gird'
  21. mixins : ['Boy','Gird']
  22. });
  24. var a_007 = new A_007();
  25. a_007.say('我可以say,也可以play,还可以sleep!!');
  26. a_007.play();
  27. a_007.sleep();

7 , singleton : 创建单例模式的类, 如果singleton为true,那么该类不能用通过new创建,也不能被继承

Js代码 复制代码 收藏代码
  1. Ext.define('Logger', {
  2. //singleton为true
  3. singleton: true,
  4. log: function(msg) {
  5. alert(msg);
  6. }
  7. });
  8. //方法调用"类名.方法名"
  9. Logger.log('Hello');

8 , statics : 与第5个inheritableStatics属性类似,statics属性定义的静态方法子类是不会继承的.请看第5个属性.

9 , uses 和 requires : 与requires属性类似,都是对某些类进行引用

uses -- 被引用的类可以在该类之后才加载.

requires -- 被引用的类必须在该类之前加载.

Js代码 复制代码 收藏代码
  1. Ext.define('Gird', {
  2. uses : ['Boy'],
  3. getBoy : function(){
  4. return Ext.create('Boy');
  5. },
  6. sleep : function(){
  7. alert('sleep');
  8. }
  9. });
  11. //对于uses属性,Boy类放在后面是可以的,不会报错
  12. Ext.define('Boy', {
  13. play : function(){
  14. alert('play');
  15. }
  16. });
  19. //对于requires属性,Boy类必须在Grid类之前加载,不然会报错
  20. Ext.define('Boy', {
  21. play : function(){
  22. alert('play');
  23. }
  24. });
  26. Ext.define('Gird', {
  27. requires : ['Boy'],
  28. getBoy : function(){
  29. return Ext.create('Boy');
  30. },
  31. sleep : function(){
  32. alert('sleep');
  33. }
  34. });
posted on 2012-04-02 11:23  笨笨丁  阅读(1852)  评论(1)  编辑  收藏  举报