EXTJS Row Editor + Combobox + Large Store

Hey Extjs Community,

I wrote this override to handle row editing a combobox with a store too large to load all at once. Basically I have a table with 650,000+ records and the user would need to select one in the combobox. But the next time you load the grid, the store would load a paginated 25 records that wouldn't include the value you need to display. I wrote this to force the combobox to fetch a single record and load it into the store if its not found.

Hope you enjoy

Code:

Ext.form.ComboBox.override({
    setValue: function (value, doSelect) {
        var me = this,
            valueNotFoundText = me.valueNotFoundText,
            inputEl = me.inputEl,
            i, len, record,
            dataObj,
            matchedRecords = [],
            displayTplData = [],
            processedValue = [];


        if (me.store.loading) {
            // Called while the Store is loading. Ensure it is processed by the onLoad method.
            me.value = value;
            me.setHiddenValue(me.value);
            return me;
        }






        // This method processes multi-values, so ensure value is an array.
        value = Ext.Array.from(value);


        // Loop through values, matching each from the Store, and collecting matched records
        for (i = 0, len = value.length; i < len; i++) {
            record = value[i];
            if (!record || !record.isModel) {
                record = me.findRecordByValue(record);
            }
            // record found, select it.
            if (record) {
                matchedRecords.push(record);
                displayTplData.push(record.data);
                processedValue.push(record.get(me.valueField));
            }
                // record was not found, this could happen because
                // store is not loaded or they set a value not in the store
            else {
                // If we are allowing insertion of values not represented in the Store, then push the value and
                // create a fake record data object to push as a display value for use by the displayTpl
                if (!me.forceSelection) {
                    processedValue.push(value[i]);
                    dataObj = {};
                    dataObj[me.displayField] = value[i];
                    displayTplData.push(dataObj);
                    // TODO: Add config to create new records on selection of a value that has no match in the Store
                }
                    // Else, if valueNotFoundText is defined, display it, otherwise display nothing for this value
                else if (Ext.isDefined(valueNotFoundText)) {
                    displayTplData.push(valueNotFoundText);
                } else {
                    /**
                    * Created by Jacob Steele

                    * Enhances a single select combobox to be able to hit the server to retrieve a value not found in the store.
                    **/
                    var model = me.store.model.$className;
                    if (model && this.queryMode != 'local') {
                        if (value.length == 1) {
                            var modelManager = Ext.ModelMgr.getModel(model);
                            if (modelManager)
                            {
                                modelManager.load(value[0], {
                                    scope: me,
                                    success: function (r) {
                                        this.store.add(r);
                                        me.setValue(r.data.id);                                       
                                    }
                                });
                            }
                        }
                        var m = Ext.create(model);


                        matchedRecords.push(m);
                        displayTplData.push(m.data);
                        processedValue.push(m.get(me.valueField));
                    }
                }
            }
        }


        // Set the value of this field. If we are multiselecting, then that is an array.
        me.setHiddenValue(processedValue);
        me.value = me.multiSelect ? processedValue : processedValue[0];
        if (!Ext.isDefined(me.value)) {
            me.value = null;
        }
        me.displayTplData = displayTplData; //store for getDisplayValue method
        me.lastSelection = me.valueModels = matchedRecords;


        if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
            inputEl.removeCls(me.emptyCls);
        }


        // Calculate raw value from the collection of Model data
        me.setRawValue(me.getDisplayValue());
        me.checkChange();


        if (doSelect !== false) {
            me.syncSelection();
        }
        me.applyEmptyText();


        return me;
    }
});

Note 90% of the code is exactly from the SetValue code, so if you use a different version of EXTJS you can take my modified section out and use it with your SetValue function.

~ Jacob

EXTJS Row Editor + Combobox + Large Store