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/