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

    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,821
    Vote Rating
    132
    Gary Schlosberg is a glorious beacon of light Gary Schlosberg is a glorious beacon of light Gary Schlosberg is a glorious beacon of light Gary Schlosberg is a glorious beacon of light Gary Schlosberg is a glorious beacon of light Gary Schlosberg is a glorious beacon of light

      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