移花接木 实例讲解Ext JS控件的扩展(1)(4)

用ComboBox实现在光标处插入文本

在上述的教职工科研基金管理系统中，如果满足基金申请条件的教职工人数很多，我们就需要根据某种评分机制对申请人进行评分，然后按分数从高到低择优选择。这里以构建一个制定申请人得分计算公式的组件为例。制定计算公式时，可以引用上面系统中已经定义好的申请条件作为计分要素，然后用加减乘除等运算符将计分要素和比例系数连接起来构成得分计算公式。

为实现上面的功能，我们考虑在文本框的右边放一个按钮，点击该按钮，列出所有的计分要素，选择一个计分要素后，在文本框中光标所在位置插入该计分要素。列出所有的计分要素，并选择其一，最好的实现方式是ComboBox，但是使用ComboBox，选择的值会覆盖文本框内所有的文字，无法实现在光标处插入文本的功能。

所以我们决定扩展ComboBox，使得新的ComboBox支持在光标处插入文本。清单5是我们为满足上述需求而扩展的新类valueCombo的部分代码，清单6是使用valueCombo作为申请人得分计算公式组件。效果如图6和图7所示。

 
图6.插入计分要素编辑评分计算公式

 
图7.评分计算公式

清单5.定义新类valueCombo  
      
Ext.ns('Ext.ux.form');  
 
ExtExt.ux.form.valueCombo=Ext.extend(Ext.form.ComboBox,{  
initComponent:function(){  
Ext.ux.form.valueCombo.superclass.initComponent.call(this);  
},  
setValue:function(v){  
vvartext=v;  
//直接显示选项的值，不做格式化转换，覆盖原来ComboBox的格式化显示的功能  
/*if(this.valueField){  
varr=this.findRecord(this.valueField,v);  
if(r){  
text=r.data[this.valueField];  
}elseif(Ext.isDefined(this.valueNotFoundText)){  
text=this.valueNotFoundText;  
}  
}*/  
this.lastSelectionText=text;  
if(this.hiddenField){  
this.hiddenField.value=v;  
}  
Ext.ux.form.ComboBox.superclass.setValue.call(this,text);  
this.value=v;  
returnthis;  
},  
//private  
onSelect:function(record,index){  
if(this.fireEvent('beforeselect',this,record,index)!==false){  
varstr=record.data[this.valueField||this.displayField];  
//实现在光标处插入文本的功能  
vartc=this.getRawValue();  
vartclen=this.getRawValue().length;  
this.focus();  
//以下代码只对Firefox生效  
if(typeofdocument.selection!="undefined")  
{  
document.selection.createRange().text=str;  
}  
else  
{  
this.setValue(tc.substr(0,this.el.dom.selectionStart)+str  
+tc.substring(this.el.dom.selectionStart,tclen));  
}  
this.collapse();  
this.fireEvent('select',this,record,index);  
}  
},  
onLoad:function(){  
if(!this.hasFocus){  
return;  
}  
if(this.store.getCount()>0){  
this.expand();  
this.restrictHeight();  
if(this.lastQuery==this.allQuery){  
//if(this.editable){  
//this.el.dom.select();为了保持光标位置，注释掉此段代码  
//}  
if(!this.selectByValue(this.value,true)){  
this.select(0,true);  
}  
}else{  
this.selectNext();  
if(this.typeAhead&&this.lastKey!=Ext.EventObject.BACKSPACE  
&&this.lastKey!=Ext.EventObject.DELETE){  
this.taTask.delay(this.typeAheadDelay);  
}  
}  
}else{  
this.onEmptyResults();  
}  
//this.el.focus();  
},  
initQuery:function(){  
//屏蔽掉下拉列表进行匹配查询的功能  
//this.doQuery(this.getRawValue());  
}  
}); 

清单6.申请人得分计算公式组件  
      
varcomboData=[  
['AGE','年龄'],  
//省略部分代码  
['DEPARTMENT','院系']  
];  
varscoreExpression=newExt.ux.form.valueCombo({  
width:250,  
listWidth:120,  
fieldLabel:‘得分计算公式’,  
mode:'local',  
valueField:'value',  
displayField:'text',  
triggerAction:'all',  
store:newExt.data.SimpleStore({  
fields:['value','text'],  
data:comboData  
}),  
triggerConfig:{tag:"img",src:"../images/score-element.jpg",  
cls:"x-textfield-button-trigger"}  
}); 

该计算公式体现了对青年教职工和女性教职工的鼓励和扶助。此部分的代码请参考示例代码中的Example2.js。