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

      0  

    Default EXTJS Row Editor + Combobox + Large Store

    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
    5,453
    Vote Rating
    113
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      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.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our human resources manager: fabienne.bell@sencha.com

Thread Participants: 1

Tags for this Thread