Question

We are using ExtJS for a webapplication. In that application, we use the standard Ext.form.ComboBox control when a simple dropdown is required, and the Ext.us.Andrie.Select control when we need a dropdown where you can select multiple values and/or clear the value. Creating either of these always requires a bunch of boilerplate code for the config options, so I wanted a class that reduced boilerplate code and while I was at it, I wanted this class to be able to produce either the simple dropdown, or the more advanced one, depending on a config option (multi: true or clearable: true), but this turned out to be a lot harder than expected.

This is the closest I came to a working result:

MyComboBox = (function() {

    var singleDefaults = {
        typeAhead: false,
        triggerAction: 'all',
        selectOnFocus: false,
        allowBlank: true,
        editable: false,
        delay: 700
    };

    var multiDefaults = {
        typeAhead: false,
        triggerAction: 'all',
        selectOnFocus: false,
        allowBlank: true,
        editable: false,
        delay: 700
    };

    var constructor = function(config) {

            if (config.multi || config.clearable) {
                config = Ext.apply(this, config, multiDefaults);
                Ext.apply(this, Ext.ux.Andrie.Select.prototype);
                Ext.apply(this, Ext.ux.Andrie.Select(config));
                Ext.ux.Andrie.Select.prototype.constructor.call(this, config);
            } else {
                config = Ext.apply(this, config, singleDefaults);
                Ext.apply(this, Ext.form.ComboBox.prototype);
                Ext.apply(this, Ext.form.ComboBox(config));
                Ext.form.ComboBox.prototype.constructor.call(this, config);
            }
    };

    return function(config) {
        this.constructor = constructor;
        this.constructor(config);
    };

})();

Well, it doesn’t crash, but it doesn’t really work either. When set to behave like Ext.ux.Andrie.Select, it wants to load the store even when it’s loaded, doesn’t expand the dropdown unless you start typing in the field.

Another approach that was tried was something like:

MyComboBox = Ext.extend(Ext.form.ComboBox, {
 constructor: function(config){
   if (config.multi || config.clearable) {
     Ext.form.ComboBox.prototype.constructor.call(this, config);
   } else {
     Ext.ux.Andrie.Select.prototype.constructor.call(this, config);
   }
 }
});

That doesn’t work because the Andrie dropdown doesn’t define a constructor function of its own so it ends up calling the constructor function of Ext.form.ComboBox, which it inherits from, which results in a normal dropdown, not the multiselect dropdown.

I suppose this is ExtJS specific, but if you have a framework agnostic approach to doing this, I can probably translate it to ExtJS.

Answer 1

Almost forgot about this question. I solved this and if anyone is wondering, here’s how to do it:

var constructor = function(config) {
    if (config && (config.multi || config.clearable)) {
        config = Ext.apply(this, config, multiDefaults);
        Ext.applyIf(this, Ext.ux.Andrie.Select.prototype);
        Ext.ux.Andrie.Select.createDelegate(this)(config);
    } else {
        config = Ext.apply(this, config, singleDefaults);
        Ext.applyIf(this, Ext.form.ComboBox.prototype);
        Ext.form.ComboBox.createDelegate(this)(config);
    }
};