移花接木扩展 Ext JS 控件

核心提示： 在上述的教职工科研基金管理系统中，如果满足基金申请条件的教职工人数很多，移花接木扩展 Ext JS 控件(7)，我们就需要根据某种评分机制对申请人进行评分，然后按分数从高到低择优选择，清单 5. 定义新类 valueComboExt.ns('Ext.ux.form');Ext.u

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

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

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

清单 5. 定义新类 valueCombo

　Ext.ns('Ext.ux.form');　
　
　Ext.ux.form.valueCombo　=　Ext.extend(Ext.form.ComboBox,　{　
　initComponent　:　function(){　
　Ext.ux.form.valueCombo.superclass.initComponent.call(this);　
　},　
　setValue　:　function(v){　
　var　text　=　v;　
　//　直接显示选项的值，不做格式化转换，覆盖原来　ComboBox　的格式化显示的功能　
　/*　　if(this.valueField){　
　　　　　　var　r　=　this.findRecord(this.valueField,　v);　
　　　　　　if(r){　
　　　　　　　　text　=　r.data[this.valueField];　
　　　　　　}else　if(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;　
　　　return　this;　
　},　
　//　private　
　onSelect　:　function(record,　index){　
　if(this.fireEvent('beforeselect',　this,　record,　index)　!==　false){　
　　　　var　str　=　record.data[this.valueField　||　this.displayField];　
　//　实现在光标处插入文本的功能　
　　　var　tc　=　this.getRawValue();　
　var　tclen　=　this.getRawValue().length;　
　　　this.focus();　
　　　//　以下代码只对　Firefox　生效　
　　　if(typeof　document.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());　
　}　
　});