ExtJS ComboBox auto-configuration

comboconfigplugin.js

Ext.namespace('wspt.form');

/**
 * This plugin enables a combobox (or subtype) to configure its "valueField" and "displayField"
 * from the metadata defined in a JsonStore.
 */
wspt.form.ComboConfigPlugin = Ext.extend(Object, {

    init : function (combo) {

        function setComboFields (store, meta) {
            // ID field maps to combo value
            this.valueField = meta.idProperty;
            // for lack of better choice, use the first field as the display 
            this.displayField = store.fields.first().name;

            // the template might have been created when "displayField" was undefined. Fix that.
            if (this.tpl) {
                this.tpl = this.tpl.replace("undefined", this.displayField);
                this.view.tpl = new Ext.XTemplate(this.tpl)
            }
        }

        combo.store.on('metachange', setComboFields, combo, {single: true});
    }
});

Ext.preg('wsptComboConfigPlugin', wspt.form.ComboConfigPlugin);