ext 浅谈类的实例

打开ext的API，如下

找到Class这个选项

将鼠标移到config那里可以看到有以下属性：

$B2C8~E1RVVB{@}QVM`NB_OI.png$

好了，让我们开始进入主题：

首先，来讲讲如何自定义一个类，在ext中，创建一个类其实与其他语言差不多，只是表达的方式不一样而已，下面是定义一个类的方法

<!--*********************************************-->
    
    <!--类的创建-->
    Ext.define('Father', {
        name: 'Unknown',
        
         constructor: function(name) {
            if (name) {
                this.name = name;
                Ext.Msg.alert('I\'m hungry','I want to eat');
            }
        },
            
        eat:function(){
           Ext.Msg.alert('I\'m hungry,I want to eat');
            }        
        })
        var aaron = Ext.create('Father', 'Aaron');
        
  <!--*********************************************-->

既然，我们知道了如何定义一个类了，那么我们就要知道他是如何继承的了，用到上图中的extend这个属性，方法如下：

Ext.define('Person', {
    say: function(text) { alert(text); }
});

Ext.define('Developer', {
    extend: 'Person',
    say: function(text) { this.callParent(["print "+text]); }
});

用mixins来实现多继承，如下：

Ext.define('Singer', {
             sing: function() {
             alert("For he's a jolly good fellow...")
            }
        });
        
        Ext.define('Dancer', {
             dance: function() {
             alert("For he's a jolly Dance...")
            }
        });
        
        Ext.define('Musician', {
             mixins: {
                 tom:'Singer',
                 jery:'Dancer'
                 },
             sing:function(){
                 alert(123);
                 // this.mixins.canSing.sing.call(this);
                 }
        })
        
        var kk=Ext.create('Musician');
        kk.sing();
        kk.mixins.tom.sing.call(this);
        kk.dance();

用alias来为类设置别名：


       /*Ext.define('MyApp.CoolPanel', {
           extend:'Ext.panel.Panel',
           alias: ['widget.coolpanel','widget.coolpanel2'],
           hehe:function(){Ext.Msg.alert('hehe','hehe')},
           title: 'Yeah!'
       });*/


       //通过Ext.widget()创建实例
       /*Ext.widget('coolpanel', {
           width : 100,
           height : 100 ,
           style: {
                       color: '#FFFFFF',
                       backgroundColor:'#000000'
                   },
           renderTo:Ext.getBody()
       });*/

       //通过xtype创建
       /*Ext.widget('coolpanel', {
           width : 200,
           height : 200 ,
           items: [
            {xtype: 'coolpanel2', html: 'Foo'},
            {xtype: 'coolpanel2', html: 'Bar'}
           ],
           renderTo:Ext.getBody()
       });*/



           /*Ext.define('Developer', {
                   alternateClassName: ['Coder', 'Hacker'],
                   code: function(msg) {
                       alert('Typing... ' + msg);
                   }
           });

           var joe = Ext.create('Developer');
           joe.code('stackoverflow');

           var rms = Ext.create('Hacker');
           rms.code('hack hack');*/

/*Ext.define('Human', {
           inheritableStatics : {

               eat : function(){
                   alert('eat');
               }
           },
           say: function(text) { alert(text); }
       });

       Ext.define('Man', {
           extend : 'Human'
       });
       Man.eat(); */

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

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

       requires -- 被引用的类必须在该类之前加载.
       */
            Ext.define('Gird', {
               uses : ['Boy'],
               getBoy : function(){
                   return Ext.create('Boy');
               },
               sleep : function(){
                   alert('sleep');
               }
           });

    //对于uses属性,Boy类放在后面是可以的,不会报错
           Ext.define('Boy', {
               play : function(){
                       alert('play');
               }
           });


    //对于requires属性,Boy类必须在Grid类之前加载,不然会报错
           Ext.define('Boy', {
               play : function(){
                   alert('play');
               }
           });

           Ext.define('Gird', {
               requires : ['Boy'],
               getBoy : function(){
                   return Ext.create('Boy');
               },
               sleep : function(){
                   alert('sleep');
               }
           });
        

       
       /*Ext.define('Father', {
       config:{
           name:'LiLi',
           age:0
           },

       constructor: function(config) {
           //Ext.Msg.alert('message','My name is '+name+'i\'m'+age+'old');
           this.initConfig(config);//除了这个，什么都不能加进来

       },

       eat:function(){
           Ext.Msg.alert('I\'m hungry,I want to eat');
           }
       })

       var aaron = Ext.create('Father', {
           name:'huahua',
           age:19
           });
       alert(aaron.getName());*/