移花接木扩展 Ext JS 控件
2010-05-10 00:00:00 来源:WEB开发网在上述的教职工科研基金管理系统中,如果满足基金申请条件的教职工人数很多,我们就需要根据某种评分机制对申请人进行评分,然后按分数从高到低择优选择。这里以构建一个制定申请人得分计算公式的组件为例。制定计算公式时,可以引用上面系统中已经定义好的申请条件作为计分要素,然后用加减乘除等运算符将计分要素和比例系数连接起来构成得分计算公式。
为实现上面的功能,我们考虑在文本框的右边放一个按钮,点击该按钮,列出所有的计分要素,选择一个计分要素后,在文本框中光标所在位置插入该计分要素。列出所有的计分要素,并选择其一,最好的实现方式是 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());
}
});
- ››扩展Axis2框架,支持基于JVM的脚本语言
- ››扩展WebSphere Portal V6个性化功能
- ››ExtJs Grid 合计 [Ext | GridPanel | GridSummary...
- ››EXT调用ASP.NET AJAX WebService
- ››ExtJS中如何扩展自定义的类
- ››扩展JavaScript的时候,千万要保留其原来的所有功...
- ››扩展数据:如何为 Model 750 服务器选择 I/O 扩展...
- ››扩展 JDT 实现自动代码注释与格式化
- ››扩展 secldap 的功能以验证多个数据源
- ››扩展 JUnit4 以促进测试驱动开发
- ››移花接木扩展 Ext JS 控件
- ››Extjs列表详细信息窗口新建后自动加载解决方法
更多精彩
赞助商链接