移花接木扩展 Ext JS 控件

清单 8. 教职工信息查询控件

　Ext.onReady(function(){　
　　var　employeeData　=　[　
　　['20001234'],　
　//　省略部分代码　
　['20091546']　
　　];　
　　var　searchField　=　new　Ext.ux.form.ComboSearchField({　
　id　:　"employeeId",　
　fieldLabel:　'员工编码'+'<font　color="red">*</font>',　
　store　:　new　Ext.data.SimpleStore({　
　　fields　:　['value'],　
　　data　:　employeeData　
　}),　
　valueField　:　'value',　
　displayField　:　'value',　
　typeAhead:　false,　
　allowBlank:　false,　
　mode　:　'local',　
　triggerAction　:　'all',　
　//　打开客户查询窗口，代码从略　
　onTrigger2Click　:　_searchCustomer.createDelegate(this),　　　　　　　　　
　listeners　:　{　
　　//　根据选中客户编码加载客户信息，代码从略　
　　select　:　_select_customer_id.createDelegate(this)　
　}　
　　　});　
　
　　　//　以下代码仅在　Firefox　中运行有效　
　　　//　初始化生成表格　
　　　var　employeeForm　=　new　Ext.FormPanel({　
　id　:　"employeeForm",　
　frame:　true,　
　title:　"教职工信息查询",　
　autoScroll　:　true,　
　items　:　[{　
　　layout　:　'column',　
　　border　:　false,　
　　autoHeight　:　true,　
　　defaults　:{　
　　　　　layout:　'form',　
　border:　false,　
　width　:　100,　
　bodyStyle:　'padding:4px'　
　　},　
　　items:　[{　
　columnWidth:　0.33,　
　name　:　"form1",　
　id　:　"form1",　
　　　　　defaultType:　'textfield',　
　　　　　defaults　:　{　
　　　　　　　width:　200　
　},　
　items　:　[searchField,　
　{　
　　fieldLabel:　'职称',　
　　name:　'title',　
　　id:　'title',　
　　disabled　:　true　
　},{　
　　fieldLabel:　'出生日期',　
　　name:　'birthday',　
　　id:　'birthday',　
　　disabled　:　true　
　},{　
　　fieldLabel:　'联系电话',　
　　name:　'tel',　
　　id:　'tel',　
　　disabled　:　true　
　　}]},{　
　columnWidth:　0.33,　
　//　从略　
　　　　},{　
　columnWidth:　0.33,　
　//　从略　
　　　　}]　
　　　　　}],　
　renderTo:　'example3'　
　　});　
　});　

图 8. TwinTrigger 之下拉列表

查看原图（大图）

图 9. 载入员工信息

查看原图（大图）

总结

本文在介绍了 Ext 的基本概念以及扩展 Ext 的一般方法后，以三个应用场景为例，详细描述了如何从已有的 Ext 控件出发，借鉴其他控件的功能，开发出满足实际需要的新控件。对于初学者来说，这种“移花接木”式的开发方式，不仅能使开发者深入了解每个控件背后的实现方式，而且能迅速助其实现新的功能、新的需求。可以说，它是一种值得推荐的创新方式。