Revisiting Clearable combo boxes in Ext 4

[Jangla]

So, I've been trying to create a nice clearable combo in Ext 4 and have hit a bit of a wall. Previously, in v3 we could provide the triggerConfig and be done with it but we can't do the same in Ext 4. In addition (in fact the main reason I'm posting) is that I also have a requirement to change the markup of each trigger slightly - I need to add an HTML5 attribute.

I've found this effort: http://www.learnsomethings.com/2011/09/30/extjs-4-clearable-combobox-ala-twintriggers-example/

...but it has a problem - it adds the new trigger to the end of the combo, changing it's width from what you would normally expect it to be. By this, I mean if you were to declare a text box above it in a form panel and set both controls to the same width, the total width of the clearable combo would be wider than the text field.

So, am I missing something? Has this issue been solved and I've just failed to find it? Any help greatly appreciated.

[mitchellsimoens]

There isn't a config for this. The trigger markup is created in the getTriggerMarkup which looks like:

    getTriggerMarkup: function() {
        var me = this,
            i = 0,
            hideTrigger = (me.readOnly || me.hideTrigger),
            triggerCls,
            triggerBaseCls = me.triggerBaseCls,
            triggerConfigs = [];

        // TODO this trigger<n>Cls API design doesn't feel clean, especially where it butts up against the
        // single triggerCls config. Should rethink this, perhaps something more structured like a list of
        // trigger config objects that hold cls, handler, etc.
        // triggerCls is a synonym for trigger1Cls, so copy it.
        if (!me.trigger1Cls) {
            me.trigger1Cls = me.triggerCls;
        }

        // Create as many trigger elements as we have trigger<n>Cls configs, but always at least one
        for (i = 0; (triggerCls = me['trigger' + (i + 1) + 'Cls']) || i < 1; i++) {
            triggerConfigs.push({
                tag: 'td',
                valign: 'top',
                cls: Ext.baseCSSPrefix + 'trigger-cell',
                style: 'width:' + me.triggerWidth + (hideTrigger ? 'px;display:none' : 'px'),
                cn: {
                    cls: [Ext.baseCSSPrefix + 'trigger-index-' + i, triggerBaseCls, triggerCls].join(' '),
                    role: 'button'
                }
            });
        }
        triggerConfigs[i - 1].cn.cls += ' ' + triggerBaseCls + '-last';

        return Ext.DomHelper.markup(triggerConfigs);
    },

As you can see there isn't anything to configure the trigger.

[Jangla]

Thanks for getting back to me. Bit of a shame - rather a backwards step in Ext4 then. I could override that entire method I suppose and turn it into code that's not really reusable anywhere but that feels really dirty

Shame really, our clearable combos in Ext3 were really slick and used no images for the triggers:

Screen Shot 2013-02-06 at 23.24.04.png

Back to the drawing board, I guess.

[ssamayoa]

Isn't enough for you just add trigger1C1s and onTrigger1Click?

[Jangla]

What's really frustrating is a spinner field has a triggerTpl config option, albeit a supposedly private one. Very frustrated that Ext4 has moved backwards in these kind of configuration options but no matter - I think I've found a way; it's just more time consuming and not as extensible.

If it works, I'll post the solution back.

[ssamayoa]

I still don't understand why you can just add buttons via triggerClsX and get click event with onTriggerClickX...

Would you please elaborate?

[ssamayoa]

Isn't as simple as this?

Ext.define('CCB.view.ClearableComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.clearablecombobox',


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


    initComponent: function() {
        var me = this;


        me.callParent(arguments);
    },


    onTrigger2Click: function(event) {
        var me = this;
        me.clearValue();
    }


});

Selection_002.png

Ext.define('CCB.view.MyWindow', {
    extend: 'Ext.window.Window',


    requires: [
        'CCB.view.ClearableComboBox'
    ],


    height: 250,
    hidden: false,
    width: 400,
    title: 'Clearable combo box test',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            defaults: {
                width: 300,
                labelWidth: 125
            },
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'clearablecombobox',
                    fieldLabel: 'Clearable combo',
                    displayField: 'value',
                    store: 'Options',
                    valueField: 'id'
                }
            ]
        });


        me.callParent(arguments);
    }


});

Done with Sencha Architect by the way.

[Jangla]

Yea, that probably would work and in fact I've arrived at an almost identical solution, but my OP stated that my main reason for posting was that I've a requirement to actually alter the markup of the combo triggers as you could in v3.

Still, not matter, I think I've come up with a way of doing it without having to resort to updating the trigger tpl; it's just not quite as efficient as before.

Thanks for the feedback and assistance though guys; no doubt I'll be asking a few more questions in the forums over the coming weeks as I move this very a large platform of ours to the latest ExtJS version.