In addition to the basic ComboBox functionality available in the Ext library, there is a poorly-documented extension called the TwinTriggerField. This is simply a standard ComboBox with two control icons on the right which you can customize.
This article is an extension of my Ext: Simple Autocomplete Example article, so please read that one as well to get all related code. This article will simply show the additional code needed to make a TwinTrigger work.
By default the ComboBox will have the down arrow which allows users to see the available elements, but you can add another icon to the right of that which, when clicked, can perform any function that you like.
The TwinTrigger Class
Start off by making a new Javascript file in your project named Ext.TwinTrigger.js and paste the following code into it. We’ll go through the code later to show what’s going on.
Ext.form.TwinTriggerField = function(config) {
Ext.form.TwinTriggerField.superclass.constructor.apply(this, arguments);
};
Ext.extend(Ext.form.TwinTriggerField, Ext.form.ComboBox, {
trigger1Class: 'x-form-search-trigger',
trigger2Class: 'x-form-select-trigger',
initComponent : function(){
Ext.form.TwinTriggerField.superclass.initComponent.call(this);
this.record = new Object();
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
]};
},
getTrigger : function(index){
return this.triggers[index];
},
initTrigger : function(){
var ts = this.trigger.select('.x-form-trigger', true);
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';
}
t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
t.addClassOnOver('x-form-trigger-over');
t.addClassOnClick('x-form-trigger-click');
}, this);
this.triggers = ts.elements;
},
onTrigger1Click : function() {
this.onTriggerClick();
},
onTrigger2Click : function() {
this.onTrigger2Click();
}
});The User’s View
Then include your file in an HTML page.
<html>
<head>
<link href="css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/Ext.TwinTrigger.js"></script>
<script type="text/javascript" src="js/interaction.example.js"></script>
</head>
<body>
<input type="text" size="20" id="facilitySearchField">
</body>
</html>The Interaction Layer
And in your interaction layer, create an instance of your TwinTrigger field. In this example, you’ll see I’m using the facilityStore object that I set up in the previous article.
var search = new Ext.form.TwinTriggerField({
applyTo:'divName',
displayField:'name',
store: facilityStore,
minChars:4,
forceSelection:true,
width: 210,
listWidth:350,
onSelect: function(record){ },
onTrigger2Click: function(){ }
});Custom Style for Second Trigger
If you want to have a custom icon for the 2nd trigger, you’ll have to do two things.
First, define a custom CSS class and specify it in the Ext.TwinTrigger.js file. You can name this class anything you like, but try to keep it consistent with Ext’s naming conventions. You can see the one that I chose in my code above.
trigger2Class: 'x-form-select-trigger',Second, modify the ext-all.css style sheet and specify the image that you’d like to use for your new class.
.x-form-field-wrap .x-form-select-trigger{background-image:url(../images/default/form/select-trigger.gif);cursor:pointer;}The Guts
Now that I’ve laid all the code out, I show you the code to focus on. The important code in your TwinTrigger class is…
onTrigger2Click : function() {
this.onTrigger2Click();
}What this does is expose a new event that you can handle in your interaction layer.
onTrigger2Click: function(){
// Do something wonderful when the user clicks the 2nd trigger icon
}Those are the basics for having two trigger icons for a ComboBox. Like I said, refer to my previous article on how to get the basics of a autocomplete ComboBox working, and then implement this code if you need it.
Comments and questions, as always, are welcome.
