PDA

View Full Version : Stop combobox from collapsing when [+] in tree within combobox is clicked



shahdollie
8 Sep 2010, 3:33 PM
hi everyone

I have implemented tree within combobox using idea from following thread
http://www.sencha.com/forum/showthread.php?27269-2.x-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

13 Sep 2010, 4:32 AM
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
13 Sep 2010, 8:41 PM
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
14 Sep 2010, 12:19 AM
No, this is not caused by onTriggerClick.

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

shahdollie
30 Sep 2010, 2:36 PM
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
11 Oct 2010, 2:15 PM
Is there any way to stop combobox from collapsing???

Please help somebody
Regards

laurentParis
11 Oct 2010, 9:15 PM
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
12 Oct 2010, 1:38 PM
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
20 Oct 2010, 5:46 AM
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
27 Oct 2010, 6:35 AM
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);
}
}
});

Pepijn
28 Oct 2010, 7:47 AM
How can I detect if the +/- is clicked?
you can use the tree beforecollapsenode and beforeexpandnode events to find if they are pressed. See the code below:


tree1.on('click',function(node){
combo.setValue(node.text);
nodeAction=0;
combo.collapse();
});
tree1.on('beforeexpandnode',function(node,deep,anim){
nodeAction=1;
});
tree1.on('beforecollapsenode',function(node,deep,anim){
nodeAction=1;
});
combo.on('collapse',function(){
if(nodeAction==1){
this.expand();
nodeAction=0;
}
});

codeworx
28 Oct 2010, 8:08 AM
this does not work if the tree is loaded with ajax because the beforeexpandnode event fires after the load and NOT after the click. this means that the combo will collapse...

orion13
16 Nov 2010, 11:38 PM
Here what seems to be going on. When you click the [+] sign, it is triggering the ComboBox event
containerclickThis event calls
onViewClickJust override that function in your ComboBox subclass.

This worked for me:


onViewClick : function(doFocus){
//do nothing
}

P.S. This only works because I am setting the value of the ComboBox manually. If for some reason your ComboBox has records in it with a tree as well the records will become unelectable.

shahdollie
17 Nov 2010, 1:53 PM
Thanks Pepijn your method worked best for me... Thanks alot

@orion13 Thanks for replying. I tried to implement onviewclick but it didn't do anything.

Thanks alot everyone for a great help...

Regards