zoukankan      html  css  js  c++  java
  • Extjs4.0 之Ext.Class 属性详解 (alias/mixins /uses/requires/singleton等属性)

    Ext.Class 属性详解 :

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

     1 Ext.define('SimplePanel', {
     2     extend: 'Ext.panel.Panel',
     3     alias: ['widget.simplepanel_007','widget.simplepanel_008'],
     4         title: 'Yeah!'
     5 });
     6 
     7 //通过Ext.widget()创建实例
     8 Ext.widget('simplepanel_007',{
     9     width : 100,
    10     height : 100
    11 }).render(Ext.getBody());
    12 
    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()创建实例:

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

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

    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 : 继承,可以继承单个类

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

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

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

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

    6 , mixins : 可以实现多继承

     1 Ext.define('Person', {
     2     say: function(text) { alert(text); }
     3 });
     4 
     5 Ext.define('Boy', {
     6     play : function(){
     7         alert('play');
     8     }
     9 });
    10 
    11 Ext.define('Gird', {
    12     sleep : function(){
    13         alert('sleep');
    14     }
    15 });
    16             
    17 Ext.define('A_007', {
    18     //继承Person
    19     extend : 'Person',
    20     //同时继承'Boy','Gird'
    21     mixins : ['Boy','Gird']
    22 });
    23             
    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创建,也不能被继承

    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 -- 被引用的类必须在该类之前加载.

     1 Ext.define('Gird', {
     2     uses : ['Boy'],
     3     getBoy : function(){
     4         return Ext.create('Boy');
     5     },
     6     sleep : function(){
     7         alert('sleep');
     8     }
     9 });
    10 
    11 //对于uses属性,Boy类放在后面是可以的,不会报错
    12 Ext.define('Boy', {
    13         play : function(){
    14                alert('play');
    15         }
    16 });
    17 
    18 
    19 //对于requires属性,Boy类必须在Grid类之前加载,不然会报错
    20 Ext.define('Boy', {
    21     play : function(){
    22         alert('play');
    23     }
    24 });
    25             
    26 Ext.define('Gird', {
    27     requires : ['Boy'],
    28     getBoy : function(){
    29         return Ext.create('Boy');
    30     },
    31     sleep : function(){
    32         alert('sleep');
    33     }
    34 });
  • 相关阅读:
    Minimum Inversion Number
    作业四
    牛客小白月赛18 G Forsaken的三维数点
    The Accomodation of Students HDU
    03-Bootstrap学习
    jquery 单击和双击事件冲突解决方案
    13-JS中的面向对象
    12-关于DOM操作的相关案例
    IO多路复用
    python读取excel文件
  • 原文地址:https://www.cnblogs.com/smile361/p/2916732.html
Copyright © 2011-2022 走看看