移花接木 实例讲解Ext JS控件的扩展(1)(5)

实现带ComboBox的TwinTriggerField

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

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

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

 
图8. TwinTrigger 之下拉列表

 
图9. 载入员工信息

清单7.定义新类ComboSearchField  
      
Ext.ns('Ext.ux.form');  
 
ExtExt.ux.form.ComboSearchField=Ext.extend(Ext.form.ComboBox,{  
initComponent:function(){  
Ext.ux.form.ComboSearchField.superclass.initComponent.call(this);  
this.triggerConfig={  
//使用TwinTrigger的样式  
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){  
returnthis.triggers[index];  
},  
initTrigger:function(){  
varts=this.trigger.select('.x-form-trigger',true);  
this.wrap.setStyle('overflow','hidden');  
vartriggerField=this;  
ts.each(function(t,all,index){  
t.hide=function(){  
varw=triggerField.wrap.getWidth();  
this.dom.style.display='none';  
triggerField.el.setWidth(w-triggerField.trigger.getWidth());  
};  
t.show=function(){  
varw=triggerField.wrap.getWidth();  
this.dom.style.display='';  
triggerField.el.setWidth(w-triggerField.trigger.getWidth());  
};  
vartriggerIndex='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  
}); 

清单8.教职工信息查询控件  
      
Ext.onReady(function(){  
varemployeeData=[  
['20001234'],  
//省略部分代码  
['20091546']  
];  
varsearchField=newExt.ux.form.ComboSearchField({  
id:"employeeId",  
fieldLabel:'员工编码'+'<fontcolorfontcolor="red">*</font>',  
store:newExt.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中运行有效  
//初始化生成表格  
varemployeeForm=newExt.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'  
});  
}); 

总结

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