zoukankan      html  css  js  c++  java

  • 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. });
  • 相关阅读:
    centos下部署启动elasticsearch错误集合与解决方案
    rpm和yum的区别
    centos7 安装Jdk1.8.0
    nvm-windows安装
    linux运行.sh命令
    centos7 安装 nvm
    centos7 安装、使用git
    转载：centos安装redis
    centos7 安装Node.js并配置为全局可用
    前端代码tomcat下简单部署
  • 原文地址：https://www.cnblogs.com/dwfbenben/p/2429765.html
Copyright © 2011-2022 走看看