Ext.ux.form.TwinCombo

[jsakalos]

This is very simple extension that generalizes Ext.ux.form.ComboBoxAdd (http://extjs.com/forum/showthread.php?t=20511). I just make no assumptions about the function of the second trigger.



// vim: ts=4:sw=4:nu:fdc=4:nospell
/*global Ext */
/**
* @class Ext.ux.form.TwinCombo
* @extends Ext.form.ComboBox
*
* Adds second trigger to combo making no assumptions about what the function
* of the second trigger is.
*
* @author Ing. Jozef Sakáloš
* @copyright (c) 2008, by Ing. Jozef Sakáloš
* @date 13. December 2008
* @version 1.0
* @revision $Id: Ext.ux.form.TwinCombo.js 589 2009-02-21 23:30:18Z jozo $
*
* @license Ext.ux.form.TwinCombo.js is licensed under the terms of the Open Source
* LGPL 3.0 license. Commercial use is permitted to the extent that the
* code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
* target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
*
* @donate
* <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
* <input type="hidden" name="cmd" value="_s-xclick">
* <input type="hidden" name="hosted_button_id" value="3430419">
* <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif"
* border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
* <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
* </form>
*/

Ext.ns('Ext.ux.form');

/**
* Creates new TwinCombo
* @constructor
* @param {Object} config A config object
*/
Ext.ux.form.TwinCombo = Ext.extend(Ext.form.ComboBox, {

trigger1Class:''
,trigger2Class:''
,fireTrigger2Events:true

// {{{
,initComponent:function() {

// setup config
var config = {
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}
]}
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
Ext.ux.form.TwinCombo.superclass.initComponent.apply(this, arguments);

if(true === this.fireTrigger2Events) {
this.addEvents('beforetrigger2click', 'trigger2click');
}
} // eo function initComponent
// }}}

,initTrigger:Ext.form.TwinTriggerField.prototype.initTrigger
,getTrigger:Ext.form.TwinTriggerField.prototype.getTrigger
,onTrigger1Click:function() {
this.onTriggerClick.apply(this, arguments);
}
,onTrigger2Click:function(e, el) {
if(true === this.fireTrigger2Events) {
if(false !== this.fireEvent('beforetrigger2click', this)) {
this.fireEvent('trigger2click', this);
}
}
}
}); // eo extend

// register xtype
Ext.reg('twincombo', Ext.ux.form.TwinCombo);

// eof

[galdaka]

Great as always Jsakalos!!

Is posible live example?

Thanks in advance,

[Frenky]

yes i agree with
Thanks in advance!

[jsakalos]

Well, this is so simple... Just include the file and use it wherever you would use a combo. Sure you need a custom css class for 2nd trigger image. The result may look like on the attached image.

[Animal]

This has been floating around the forum for months hasn't it?

http://extjs.com/forum/showthread.php?p=232225#post232225

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/twincombo.jpg

[jsakalos]

Haha, blind me.... ;)

I've been trying to find it but I hadn't. Fortunately it was simple enough so I haven't wasted too much time.

Thanks

[moegal]

Where is Ext.ux.form.TwinCombo?

It is not here in the post.

Thanks, Marty

[Animal]

Ext.ux.TwinCombo = Ext.extend(Ext.form.ComboBox, {
initComponent: function() {
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}
]};
this.onTrigger2Click = this.onTrigger2Click.createInterceptor(this.collapse);
Ext.ux.TwinCombo.superclass.initComponent.call(this);
},
getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
trigger1Class: Ext.form.ComboBox.prototype.triggerClass
});

[moegal]

Animal,

Thanks. I have a question about the cls. When I inspect in firebug it shows as:

x-form-trigger undefined

I am sure I am missing something simple here.

Do I add the following?

trigger2Class: Ext.form.ComboBox.prototype.trigger2Class

and then add the trigger2Class?

Thanks again, Marty

This did it, thanks

trigger2Class: 'x-form-clear-trigger',

[honzakuchar]

Thanks you VERY much - this is great! :)