移花接木扩展 Ext JS 控件

清单 6. 申请人得分计算公式组件

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

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


图 7. 评分计算公式

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

实现带 ComboBox 的 TwinTriggerField

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