Stop combobox from collapsing when [+] in tree within combobox is clicked

[shahdollie]

hi everyone

I have implemented tree within combobox using idea from following thread
http://www.sencha.com/forum/showthre...-ComboBox-Tree

but I have a small problem ...... when + or arrow on tree is clicked, the combobox collapses

I think it is because of onTriggerClick event of combobox...so is there any way to stop this????????

for example if i can suspend/cancel onTriggerClick event of combobox when i expand it and resume/allow when i collapse it....

For reference follow is the code for onTriggerClick event of combobox

<div id="method-Ext.form.ComboBox-onTriggerClick"></div>
/**
* @method onTriggerClick
* @hide
*/
// private
// Implements the default empty TriggerField.onTriggerClick function
onTriggerClick : function(){
if(this.readOnly || this.disabled){
return;
}
if(this.isExpanded()){
this.collapse(); //THIS MAKES COMBOBOX TO COLLAPSE
this.el.focus();
}else {
this.onFocus({});
if(this.triggerAction == 'all') {
this.doQuery(this.allQuery, true);
} else {
this.doQuery(this.getRawValue());
}
this.el.focus();
}
}

Please help me....Thanks alot.......

Regards

[jay@moduscreate.com]

this.onCollapse should be fired when the trigger is clicked if the list is expanded OR when a node is selected in the tree.

[shahdollie]

hi thanks for replying.

But i didn't get you reply.....my problem is whenever + sign in tree is clicked, combobox collapses (i think that much be due to its onTriggerClick() ) so i want to know how to stop this or how to stop to fire ontriggerclick() event...

Is there any way to do this????

Regards

[Condor]

No, this is not caused by onTriggerClick.

You are handling a click on the tree [+] as a node selection (which you shouldn't).

[shahdollie]

hi thanks for replying....

You are right Condor this is not cause by onTriggerClick event. But then what causes it???

I didn't understand by - "handling click on tree as node selection" .

I m using click event of TreeNode. So do you mean i shouldn't use that??? Then what should i use????

What i want to do is when i click on [+] in tree, the combobox shouldn't collapse.

Is there a way to do this????
Thanks alot for helping
Regards

[shahdollie]

Is there any way to stop combobox from collapsing???

Please help somebody
Regards

[laurentParis]

when you click on [+], blur event fired for combox and it's postBlur method collapsed combo !
if you want to stop it, redefined beforeBlur method, test condition [if I click on [+] => yes : return false; no: call return superclass beforeblur;]

var myCombo = new Ext.form.ComboBox({
  ...
  beforeBlur: function () {
    if(/*...test if user click on [+]...*/) {        /* good luck :) */
      return false;
    }
    else {
      return this.constructor.prototype.beforeBlur.call(this);
    }
  }
});

[shahdollie]

hi thanks for replying.

I tried to track but i think when i click on [+] of tree, it doesn't fires beforeBlur event. I had tried to track other events also like blur, beforeselect, change, select and collapse. Out of these only collapse event was fired.

Regards

[codeworx]

it is difficult to prevent the combobox from collapsing but i have a "dirty" solution with jQuery. if you are running jquery AND ExtJs/Sencha you can prevent the combobox-collapsing with a jQuery live-event like this:

 ...
 initComponent: function () {
     this.treeId = Ext.id();
     this.focusLinkId = Ext.id();
 
     Ext.apply(this, {
         ...
     });
 
     this.on('expand', this.onExpand);
 
     // prevent combo from hiding when a +/- icon is clicked
    this.on('collapse', function () {
        if (!this.preventCollapse) return;
        this.expand();
        this.preventCollapse = false;
    });
    var me = this; // necessary for access to the combo inside the following jQuery event functions
    jQuery(".x-combo-list .x-tree-ec-icon").live('mouseup', function () {
        me.preventCollapse = true;
    });
     ...
 },
 ...

see attached file for complete code

[ttbgwt]

How can I detect if the +/- is clicked?

when you click on [+], blur event fired for combox and it's postBlur method collapsed combo !
if you want to stop it, redefined beforeBlur method, test condition [if I click on [+] => yes : return false; no: call return superclass beforeblur;]

var myCombo = new Ext.form.ComboBox({
  ...
  beforeBlur: function () {
    if(/*...test if user click on [+]...*/) {        /* good luck :) */
      return false;
    }
    else {
      return this.constructor.prototype.beforeBlur.call(this);
    }
  }
});