Search code examples
extjspaginationcomboboxjsonstore

ExtJS paged combo with remote JSON store. Display selected value with paging


I've got an ExtJS combo with remote store, which returns to me data in JSON format. When I select a value on the first page (for example) and then navigate to another page, the combo display selected id, not the value.

How can I always display a selected value?

Code:

Ext.onReady(function() {
    Ext.define('Model', {
        extend: 'Ext.data.Model',
        fields: ['title'],
        idProperty: 'threadid'
    });

    var store = Ext.create('Ext.data.Store', {
        pageSize: 50,
        model: 'Model',
        remoteSort: true,
        proxy: {
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/topics-browse-remote.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            simpleSortMode: true
        }
    });

    var combo = Ext.create('Ext.form.ComboBox', {
        fieldLabel: 'Value',
        store: store,
        queryMode: 'remote',
        displayField: 'title',
        valueField: 'threadid',
        pageSize: 50,
        labelWidth: 50,
        width: 300,
        padding: '60 0 0 0'
    });

    Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: { type: 'vbox', align: 'center' },
        items: combo
    }).show();
})​

Example: http://jsfiddle.net/coshmos/5wT6H/

More information (case study):
I've got a table where I can update records. I click on an item and then my server return values from a database. Then a window with UI appear. For all paged combo it's return only id's. So until I don't navigate to page with item with returned id, I don't see a value. If I disable paging and load all values, all works as expected, but loading of thousands values is not good.


Solution

  • It can be fixed this way:

    Ext.override(Ext.form.field.ComboBox,{
        findRecord: function(field, value) {
            var foundRec = null;
            Ext.each(this.lastSelection, function(rec) {
                if (rec.get(field) === value) {
                    foundRec = rec;
                    return false; // stop 'each' loop
                }
            });
            if (foundRec) {
                return foundRec;
            } else {
                return this.callParent(arguments);
            }
        }
    });
    

    try it out: http://jsfiddle.net/5wT6H/3/