Extjs 继承控件的三种写法

  /*假设现在有一面板类，我们在此基础上增加一个新的方法并重写（override）父类的一个方法，过程如下：
*/
  var MyPanel=function(config){
  //这里复用配置项
        Ext.apply(this,{
            width:300,
            heihgt:300
        });
        
        //调用父类的构造函数，提取父类功能
        MyPanel.superclass.constructor.apply(this,arguments);//arguments是实参  
         // 在这里你可以为当前对象新添加功能    
         // 如事件： 
         this.on('click',function(){alert('you Click'+this.title)},this);//on(事件名，处理函数，函数作用域)  
    
  }  
  
  // My Panel继承了Ext.Panel
  Ext.extend(MyPanel,Ext.Panel,{
  // 在这里你可以为当前的类加入静态的变量，所有这个类生成的实例都是使用这里声明的变量    
  // 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。     
         // 新添加的函数
         myNewFunction:function(){alert("这是新添加的一个函数")},
         // 重写原有函数
         onRender:function(){
            MyPanel.superclass.onRender.apply(this,arguments);
            this.myNewFunction();
         }
            
  });
  
   //实例化子类对象
  var myfirstpanel=new MyPanel({
        title:'My First Panel'
  });
  
  var mysecondpanel=new MyPanel({
        title:'My Second Panel'
  });
  

/*用重写构造器的方式实现继承*/
var MyPanel=function(config){
    //调用父类的构造函数，提取父类的功能
    MyPanel.superclass.constructor.call(this,Ext.apply({
        //这里复用配置项
        width:300,
        height:300
    },config));
    
    //位于构造器这后，在这里你可以为当前对象新添加功能（如处理事件）
    this.on('click',function(){alert("你已点击"+this.title)},this);
}  



  // My Panel继承了Ext.Panel
  Ext.extend(MyPanel,Ext.Panel,{
  // 在这里你可以为当前的类加入静态的变量，所有这个类生成的实例都是使用这里声明的变量    
  // 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。     
         // 新添加的函数
         myNewFunction:function(){alert("这是新添加的一个函数")},
         // 重写原有函数
         onRender:function(){
            MyPanel.superclass.onRender.apply(this,arguments);
            this.myNewFunction();
         }
  });
  
   //实例化子类对象
  var myfirstpanel=new MyPanel({
        title:'My First Panel'
  });
  
  var mysecondpanel=new MyPanel({
        title:'My Second Panel'
  });


/*以上的方法是重写构造器的方式实现继承的，另外我们还可以重写initComponents方法写出相同的功能，但需要指出是initComponent方法是属于 Ext.Components的方法，只能在组件上使用，不是一个通用的方法。这里是一个示例：*/

var MyPanel=Ext.extend(Ext.Panel,{
 // 在这里你可以为当前的类加入静态的变量，所有这个类生成的实例都是使用这里声明的变量   
 // 如果你不确定请在构造器内设定。不要在这里放置由'new'或'xtype'操作而成的对象。在构造器内设定配置项对象会更安全。
    initComponent:function(){
     //这里复用配置项
        Ext.apply(this,{
        
            width:300,
            height:300
        })
        // 调用父类的构造函数，提取父类的功能
        MyPanel.superclass.initComponent.apply(this,arguments);
         // 位于构造器之后，在这里你可以为当前对象新添加功能（如处理如事件）
        this.on('click',function(){alert("你已点击"+this.title)},this);
    },
    //新添加函数
    myNewFunction:function(){
        alert('这是一条新添加的函数');
    },
    //重写原有函数
    onRender:function(){
        MyPanel.superclass.onRender.apply(this,arguments);
        this.myNewFunction();
    }
});  


   //实例化子类对象
  var myfirstpanel=new MyPanel({
        title:'My First Panel'
  });
  
  var mysecondpanel=new MyPanel({
        title:'My Second Panel'
  });


   
 <a href="javascript:myfirstpanel.title">first</a>    
 <a href="javascript:mysecondpanel.myNewFunction()">second</a>