Ext 控件继承

 最近在看Ext的源码，发现Ext的基础控件都是使用继承来实现的，忽然觉得自己的写法也该改改了，不然js代码多起来了，就很难管理了。

         不用继承的写法：

 

 // 设置颜色的下拉列表
 var store_color = new Ext.data.JsonStore({
         url : "whInput!getColorList.action",
         method : "post",
         root : "ColorList",
         fields : ["colorId", "colorName"],
         autoLoad : true
 });
 var combo_color = new Ext.form.ComboBox({
         id : "combo_color",
        name:'colorId',
        hiddenName:'colorId',
        store : store_color,
        valueField : "colorId",
       displayField : "colorName",
       forceSelection : true,
       typeAhead : true,
       triggerAction : 'all',
       selectOnFocus : true,
       fieldLabel : "颜色",
      emptyText: '请选择',
      anchor:'95%',
      allowBlank : false
 });

              这样看起来，如果要写多个Combo，特别是查询，就会觉得很冗余了。因为其中有很多属性是几乎一样的。我开始感叹Java的强大，面向对象的伟大。所以我也决定将自己的前台代码改头换面！

              Ext的继承是这样写的：var combo = Ext.extend(Ext.Window,{});

              Ext.extend表示继承,第一个参数是指父类，也就是你要继承的类。后面是一个对象{}，表示你要覆盖的父类的属性或者定义自己的属性等。例如：

 

Ext.ns('Leangle');//定义命名空间
Ext.ns('Leangle.form');//同上

//继承自Ext.form.ComboBox

Leangle.form.BaseComboBox = Ext.extend(Ext.form.ComboBox,{
          forceSelection : true,
          typeAhead : true,
          triggerAction : 'all',
          selectOnFocus : true,
          width:70,
          emptyText: '请选择',
          mode:'local'        //本地过滤
});

//向Ext注册此控件，可以通过xtype:'basecombo'来new 一个这个控件

Ext.reg('basecombo',Leangle.form.BaseComboBox);

 

        这样的话，我以后所定义的ComboBox就可以直接继承我的Leangle.form.BaseComboBox这个类，然后在这个ComboBox里面就可以少定义BaseComboBox已经定义的属性了。如下:

 

 Leangle.form.combo.ColorComboBox = Ext.extend(Leangle.form.BaseComboBox,{
       id : "combo_color",
       name:'colorId',
       hiddenName:'colorId',
       valueField : "colorId",
      displayField : "colorName",
      fieldLabel : "颜色",
      store:new Ext.data.JsonStore({
            id:'store_color',
            url : "whInput!getColorList.action",
            method : "post",
            root : "ColorList",
            fields : ["colorId", "colorName"],
           autoLoad : true
      })
});

           这样代码就简洁很多了，管理起来也相对容易了。这是Ext的继承，下次我会再讲解一下Ext的插件。