首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Ext 控件承继

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

热点排行