View Poll Results: How important do you think this new feature would be?

Voters
36. You may not vote on this poll
  • Critical

    12 33.33%
  • Very

    18 50.00%
  • Somewhat

    3 8.33%
  • Not

    3 8.33%
Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Feature Request: Clearable ComboBox

  1. #1
    Ext User
    Join Date
    Sep 2007
    Location
    Rothschild, WI
    Posts
    46

    Lightbulb Feature Request: Clearable ComboBox

    Please consider adding built-in support for a "clearable" ComboBox in a future release.

    I'm currently using wck555's original "ClearableComboBox" as shown at http://extjs.com/forum/showthread.php?t=9619. If built-in to Ext, a simple "clearable" config option could be used to the current ComboBox rather than an extension class.

    (Other versions are shown/linked later in the thread, including with history support, but at the apparent expense of additional complexities and size. "Clearable" support is simple, often requested, and somewhat necessary to get a ComboBox back to its initial state after page load by the user.)

    (I'm somewhat disappointed that the only "official" way for making these requests is as an Ext Premium Subscription member. I definitely agree that requests by premium members should have higher priority, but I think a way to track and vote upon all feature requests would be beneficial to everyone.)

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    67

    Thumbs up

    I'd love to see this functionality in the standard combo component too!

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You mean an extra trigger on the end which clears the Combo's Store?

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    We have a TwinTriggerCombo class, and you can use the second trigger to do anything you want. Just configure it with trigger2Class: 'class that gives it an image' and onTrigger2Click: funcToCall

    Code:
    Ext.ux.TwinTriggerCombo = 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(function() {
                this.collapse();
            });
            Ext.ux.TwinTriggerCombo.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
    });

  5. #5
    Ext User
    Join Date
    Dec 2007
    Posts
    67

    Default

    Thanks Animal, that's exactly what I'm after.

    - Jit

  6. #6
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Quote Originally Posted by jit View Post
    Thanks Animal, that's exactly what I'm after.

    - Jit
    This was covered a lot around here.

  7. #7

    Default

    Animal, thank you for your extension, but it still has one problem.

    If it combotrigger is placed in collapsed fieldsed or panel it doesn't shows on panel expand.

    Here is test code:

    Code:
     
    Ext.ux.TwinTriggerCombo = 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(function() {
                this.collapse();
            });
            Ext.ux.TwinTriggerCombo.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
    });
     
    Ext.reg('combotrigger',Ext.ux.TwinTriggerCombo);
     
    fields= [
            {
          xtype:'combo',
          fieldLabel:'combo'      
         }, {
          xtype:'combotrigger',
          fieldLabel:'twincombo',
          onTrigger2Click: function() {}
     
         }
      ]
     
    Ext.onReady(function() { 
        new Ext.FormPanel ({
         renderTo: Ext.get('catalog_div'),
         items: [{
          xtype:'fieldset',
          collapsible:true,
          title:'collapsible fieldset',
          collapsed:true,
          height:100,
          items:fields
         }]     
        })    
    });
    After fieldset expanding I see only combobox, but triggerfield is not displayed.

    Screenshot:

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    That's a well known problem with ComboBoxes.

    I think there's a workaround in SVN, but here's another. Put this code before the definition of TwinTriggerCombo

    Code:
    // Temporarily ensure that the passed element (and all ancestors)
    // is display:block for the calling of the specified function
    function ensureLayout(elm, func, scope) {
        var r,
            e = Ext.get(elm),
            elmStyle = elm.style,
            oldDisp = elmStyle.display,
            wasXHidden = e.hasClass('x-hide-display');
    
        if (wasXHidden) {
            e.removeClass('x-hide-display');
        }
        elmStyle.display = "block";
        if (!elm.offsetWidth) {
            r = ensureLayout(elm.parentNode, func, scope);
        } else {
            r = func.call(scope || window);
        }
        elmStyle.display = oldDisp;
        if (wasXHidden) {
            e.addClass('x-hide-display');
        }
        return r;
    }
    
    Ext.override(Ext.form.TriggerField, {
        onResize : function(w, h){
            ensureLayout(this.wrap.dom, function() {
                Ext.form.TriggerField.superclass.onResize.call(this, w, h);
                var tw = this.trigger.getWidth();
                if(typeof w == 'number'){
                    this.el.setWidth(this.adjustWidth('input', w - tw));
                }
                this.wrap.setWidth(w);
            }, this);
        }
    });

  9. #9

    Default

    Animal, I put your code in front of my example..
    It didn't help.

    Btw, I am using Ext 2.3, maybe it is already fixed in 3.0 , I didn't checked.

    My final application have too many compatibility issues with 3.0, so I decided not to migrate now.

    I also found that doing syncSize() for all twintrigger combos in expand event forces them to display. But it is not the accurate solution..

  10. #10
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Please do not post polls for a feature request.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •