PDA

View Full Version : [ext 2.2.1] MultiTriggerCombobox 4 U



svdb
21 Jun 2009, 2:48 PM
Hi there,

I've been browsing the forum for a while in search of a combobox which would support more than 2 trigger buttons. But I couldn't find exactly what I wanted and which works in Ext 2.x.
The following posts helped a lot, but still didn't quite fit my needs.
http://extjs.com/forum/showthread.php?p=232225
http://extjs.com/forum/showthread.php?t=12030

So I rolled up my sleeves and enhanced the TwinTriggerField mechanism a little bit to support more than 2 trigger buttons.
Don't ask why more than 2 buttons are needed; the customer is king. ;)



/* Enhanced combo box, allows multiple trigger buttons to be set with custom click event handlers.
The additional buttons may take their image from an existing IMG tag on the page, or from a specified SRC.
@imgButtons {array} trigger definitions with the following attributes: applyTo, onTrigger, triggerClass, src, hideTrigger
*/
Ext.ux.MultiTriggerComboBox = Ext.extend(Ext.form.ComboBox, {
// Additional buttons definition to be passed in instance definition.
imgButtons:[{
//applyTo: 'whatever', // -> Use existing IMG tag on page...
//src: 'images/whatever.gif', // -> ...or a url to an image.
//onTrigger: function(){},
//triggerClass: 'whateverClassName',
//hideTrigger:true
}],

initComponent : function(){
this.triggerConfig = {
tag:'span',
cls:'x-form-twin-triggers',
cn:[{
tag: "img",
src: Ext.BLANK_IMAGE_URL,
cls: "x-form-trigger " + this.triggerClass
}]
};

// Use the additional btn definitions to create more trigger definitions.
for (var i=0, maxi=this.imgButtons.length; i<maxi; i++) {
var btn = this.imgButtons[i];
var imgElem = Ext.get(btn.applyTo);
this.triggerConfig.cn[i+1] = {
tag: "img",
src: btn.src || ((imgElem) ? imgElem.dom.src : Ext.BLANK_IMAGE_URL),
cls: ((btn.triggerClass) ? 'x-form-trigger ' + btn.triggerClass : 'x-form-trigger')
}
}

Ext.ux.MultiTriggerComboBox.superclass.initComponent.call(this);
},

// Override TriggerField's method.
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()); // This was a minus sign in the original code: bug??
};

if (this.hideTrigger) {
t.dom.style.display = 'none';
}

if (index == 0) {
// The first one is always the default dropdown button.
t.on("click", this['onTriggerClick'], this, {preventDefault:true});
} else {
var btnDef = this.imgButtons[index-1];
if (btnDef.hideTrigger) {
t.dom.style.display = 'none';
}
t.on("click", btnDef.onTrigger, this, {preventDefault:true});
}
t.addClassOnOver('x-form-trigger-over');
t.addClassOnClick('x-form-trigger-click');
}, this);
this.triggers = ts.elements;
},

getTrigger : function(index){
return this.triggers[index];
}

});
Use the component as follows.
(sample taken from \ext-2.2.1\examples\form\combos.js)


var combo = new Ext.ux.MultiTriggerComboBox({
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
applyTo: 'local-states',

hideTrigger:false,

imgButtons:[{
applyTo: 'myImage',
hideTrigger:true,
onTrigger: function(){ do something here }
},{
src: '../shared/icons/fam/cross.gif',
onTrigger: function(){ do something here }
},{
src: '../shared/icons/fam/add.gif',
onTrigger: function(){ do something here }
},{
src: '../shared/icons/fam/plugin.gif',
onTrigger: function(){ do something here }
}]
});
Tested on FF 2.0.0.20 and IE 7.0.5730
See attached jpg for preview.

I hope I didn't reinvent the wheel... :)

Cheers,
SVDB

mystix
21 Jun 2009, 5:36 PM
i think you missed this FR:
346227

svdb
22 Jun 2009, 8:21 AM
Aha, well at least I learned something. Thanks. :)

gelimbung
6 Dec 2009, 9:44 PM
am beginner, please give some example codes about twin trigger, coz i wanna developing application full features in extjs :)