Ext JS 4.2 Combobox With Remote Store & Paging Default Value Issue

Question

I have a combobox on a form that I am using to add and edit one of my models. The list of values the combobox is bound to could potentially be quite large (1,000's of records) so I need to use a remote data store with paging to prevent having to load all the values at once. In the add form, this works great, but when I am trying to edit my model using the form, I am unable to reliably set the value to the combobox.

When the combobox loads, the store loads the first 50 records. The problem is, the combobox setValue function searches only the loaded values in the store for the record before setting the value. If the selected record is not in the first 50 records in the store, setValue doesn't find it and the value is not set.

I have created a jsFiddle that demonstrates the issue: http://jsfiddle.net/mgolus/Z3Jpy/

The code is below:

var testVendorId;
testVendorId = 30; // Works
//testVendorId = 60; // Doesn't Work :-(

Ext.onReady(function() {
    var addUserForm = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    model: 'Test.model.CatalogItem',
    items: [
            {
                xtype: 'textfield',
                name: 'number',
                fieldLabel: 'Number'
            },
            {
                xtype: 'combobox',
                name: 'vendorId',
                fieldLabel: 'Vendor',
                forceSelection: true,
                store: {
                    model: 'Test.model.Vendor',
                    autoLoad: true,
                    pageSize: 50
                },
                displayField: 'name',
                valueField: 'id',
                pageSize: 50 // I know this just needs to be any value > 0 to show the pager, just putting 50 for consistency
            }
        ],
    });

    addUserForm.down('combobox').getStore().on('load', function() {
            var user = Ext.create('Test.model.CatalogItem', { id: 1, number: 'T001', vendorId: testVendorId });
            console.log(user);
            addUserForm.loadRecord(user);    
    });


});

Ext.define('Test.model.CatalogItem', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id' },
        { name: 'number' },
        { name: 'vendorId' }
    ] 
});

Ext.define('Test.model.Vendor', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id' },
        { name: 'name' }
    ],
    proxy: {
        type: 'jsonp',
        url: 'http://pmvitals.com/vendors.aspx',
        reader: {
            root: 'data'
        }
    }
});

When the selected id (testVendorId set at the top) is 30, the combobox populates with the default value. If you set the id to anything over 50, the value will not be populated since it doesn't exist in the first page of the store.

Any help is greatly appreciated!

existdissolve existdissolve · Accepted Answer · 2013-05-18T03:04:15

I encountered a similar issue. To overcome it, I created a custom extension of the combobox (I called it RemoteComboBox). One of the main features of it is that if it's value is set via a form record load, or even just setValue(), the default load behavior is to make a remote request for the actual value. This returns 1 value, so the response is small, and then the default behavior of the combobox takes over once the user begins interacting with it again.

The difference with my solution and your need is that you'll still have the issue of paging. Even if your value is initially found by the id-based request, you'll still have the challenge of locating the same item across several pages of records.

Do you really need paging, though? I've found it's often more helpful to simply provide richer search tools than to force the user to sift through several pages of records.

Ext JS 4.2 Combobox With Remote Store & Paging Default Value Issue

1 Answers