1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    47
    Vote Rating
    0
    jakejamessteele is an unknown quantity at this point

      0  

    Default 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

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    8,492
    Vote Rating
    227
    Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of

      0  

    Default

    Sounds cool. Thanks for sharing your work with the community! Perhaps you could post a demo so that we can see it in action.


    Join me at SenchaCon 2016!

Thread Participants: 1

Tags for this Thread