移花接木扩展 Ext JS 控件

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

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

清单 7. 定义新类 ComboSearchField

　Ext.ns('Ext.ux.form');　
　
　Ext.ux.form.ComboSearchField　=　Ext.extend(Ext.form.ComboBox,　{　
　　initComponent　:　function(){　
　　　　Ext.ux.form.ComboSearchField.superclass.initComponent.call(this);　
　　　　this.triggerConfig　=　{　
　　　　　　//　使用　Twin　Trigger　的样式　
　　　　　　tag:'span',　cls:'x-form-twin-triggers',　cn:[　
　　　　　　{tag:　"img",　src:　Ext.BLANK_IMAGE_URL,　cls:　"x-form-trigger　"　+　
　　　　　　this.triggerClass},//　使用默认　ComboBox　的样式　
　　　　　　{tag:　"img",　src:　Ext.BLANK_IMAGE_URL,　cls:　"x-form-trigger　"　+　
　　　　　　　　this.trigger2Class}//　自定义　Trigger2　的样式　
　　　　]};　
　　},　
　　getTrigger　:　function(index){　
　　　　return　this.triggers[index];　
　　},　
　　initTrigger　:　function(){　
　　　　var　ts　=　this.trigger.select('.x-form-trigger',　true);　
　　　　this.wrap.setStyle('overflow',　'hidden');　
　　　　var　triggerField　=　this;　
　　　　ts.each(function(t,　all,　index){　
　　　　　　t.hide　=　function(){　
　　　　　　　　var　w　=　triggerField.wrap.getWidth();　
　　　　　　　　this.dom.style.display　=　'none';　
　　　　　　　　triggerField.el.setWidth(w-triggerField.trigger.getWidth());　
　　　　　　};　
　　　　　　t.show　=　function(){　
　　　　　　　　var　w　=　triggerField.wrap.getWidth();　
　　　　　　　　this.dom.style.display　=　'';　
　　　　　　　　triggerField.el.setWidth(w-triggerField.trigger.getWidth());　
　　　　　　};　
　　　　　　var　triggerIndex　=　'Trigger'+(index+1);　
　
　　　　　　if(this['hide'+triggerIndex]){　
　　　　　　　　t.dom.style.display　=　'none';　
　　　　　　}　
　　　　　　//this.mon(t,　'click',　this['on'+triggerIndex+'Click'],　this,　
　　　　　　{preventDefault:true});　
　　　　//　定义第一个　trigger　的触发事件　
　　　　　　if(index==0)　
　　　　　　　　t.on("click",　this['onTriggerClick'],　this,　{preventDefault:true});　
　　　　//　定义第二个　trigger　的触发事件　
　　　　　　if(index==1)　
　　　　　　　t.on("click",　this['onTrigger2Click'],　this,　{preventDefault:true});　
　　　　　　t.addClassOnOver('x-form-trigger-over');　
　　　　　　t.addClassOnClick('x-form-trigger-click');　
　　　　},　this);　
　　　　this.triggers　=　ts.elements;　
　　},　
　
　　validationEvent:false,　
　　validateOnBlur:false,　
　　trigger2Class:'x-form-search-trigger',　
　　width:180,　
　　hasSearch　:　false,　
　　paramName　:　'query',　
　　onTrigger2Click　:　Ext.emptyFn　
　});