现在的位置: 首页 > 综合 > 正文

Extjs继承

2019年11月17日 ⁄ 综合 ⁄ 共 2801字 ⁄ 字号 评论关闭

  /*假设现在有一面板类,我们在此基础上增加一个新的方法并重写(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>   

抱歉!评论已关闭.