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的插件。