移花接木 实例讲解Ext JS控件的扩展

图5.编辑助研基金申请条件5

这里表示计算机学院年龄不大于35岁讲师以上（含）职称的女教师，如果发表的论文数量多于10篇的，有资格申请该助研基金。可以看出该基金体现了对优秀青年女教师的科研支持。此部分的代码请参考示例代码中的Example1.js。

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

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

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

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

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

图7.评分计算公式

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45.

清单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!=\{

document.selection.createRange().text=str; } else {

this.setValue(tc.substr(0,this.el.dom.selectionStart)+str +tc.substring(this.el.dom.selectionStart,tclen)); }

46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90.

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,

91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102.

fieldLabel:?得分计算公式?, mode:'local', valueField:'value', displayField:'text', triggerAction:'all',

store:newExt.data.SimpleStore({ fields:['value','text'], data:comboData }),

triggerConfig:{tag:\cls:\});

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

在上述的教职工科研基金管理系统中，需要一个查询员工详细信息的控件。只要输入员工号或者从下拉列表中选择一个员工号，就能自动载入该员工所有的信息。同时希望能根据搜索条件查询符合条件的员工，从中选择某个员工，查看他的详细信息。

依据这个需求，我们要构建一个查询员工的组件，当在文本框中输入员工号前几位能自动列出所有相关员工号，或者直接从下拉框中选择一个员工号，随后自动载入员工信息；当点击文本框右边的搜索按钮，打开新的窗口，在新窗口中能够根据员工职位、院系、出生日期所在范围等进行搜索，选中员工之后，也会自动载入该员工的信息。如果能将ComboBox和TwinTriggerField的功能结合起来，将是实现此需求的最直接、最便利的方法。

清单7是我们为满足上述需求而扩展的新类ComboSearchField的部分代码，清单8是使用ComboSearchField构造了一个Form作为教职工信息查询控件。此部分的完整代码请参考Example3.js。效果如图8和图9所示。

图8. TwinTrigger 之下拉列表

图9. 载入员工信息

1. 2. 3. 4. 5.

清单7.定义新类ComboSearchField

Ext.ns('Ext.ux.form');

ExtExt.ux.form.ComboSearchField=Ext.extend(Ext.form.ComboBox,{