Ext 控件继承?最近在看Ext的源码,发现Ext的基础控件都是使用继承来实现的,忽然觉得自己的写法也该改改了,
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的插件。