1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    67
    Vote Rating
    0
    shahdollie is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    67
    Vote Rating
    0
    shahdollie is on a distinguished road

      0  

    Default ???

    ???


    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

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No, this is not caused by onTriggerClick.

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

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    67
    Vote Rating
    0
    shahdollie is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Aug 2010
    Posts
    67
    Vote Rating
    0
    shahdollie is on a distinguished road

      0  

    Default


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

    Please help somebody
    Regards

  7. #7
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246
    Vote Rating
    2
    laurentParis is on a distinguished road

      0  

    Default


    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;]

    Code:
    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);
        }
      }
    });

  8. #8
    Sencha User
    Join Date
    Aug 2010
    Posts
    67
    Vote Rating
    0
    shahdollie is on a distinguished road

      0  

    Default


    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

  9. #9
    Ext JS Premium Member
    Join Date
    Feb 2008
    Location
    Feuerthalen, Switzerland
    Posts
    30
    Vote Rating
    0
    codeworx is on a distinguished road

      0  

    Default


    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:

    Code:
     ...
     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
    Attached Files

  10. #10
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    374
    Vote Rating
    13
    ttbgwt will become famous soon enough

      0  

    Default


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

    Quote Originally Posted by laurentParis View Post
    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;]

    Code:
    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);
        }
      }
    });

Similar Threads

  1. Cancel drop event in tree
    By MaxT in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 1 Nov 2011, 12:34 AM
  2. [Solved]Overriding onTriggerClick for ComboBox?
    By kjordan in forum Ext 2.x: Help & Discussion
    Replies: 14
    Last Post: 7 Jan 2008, 11:18 AM
  3. [1.0.1a] ComboBox possible bug in onTriggerClick
    By theo in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 16 May 2007, 5:13 PM

Thread Participants: 7

Tags for this Thread