Search code examples
javascriptsortingextjsstore

ExtJS data store does not sort


I'm using ExtJS 4.2 and created a store with a sorter. The store loads data from a JSONP web service call just fine, but it refuses to sort. Below is a representation of my model, store and load call.

Model:

Ext.define('Desktop.models.products.DtoProductFamilyModel', {
extend: 'Ext.data.Model',
fields: [
    {
        name: 'ProductFamilyId',
        type: 'string',
        useNull: false,
        defaultValue: Util.getBlankGuid()
    },
    {
        name: 'ParentProductFamilyId',
        type: 'string',
        useNull: true,
        defaultValue: Util.getBlankGuid()
    },
    {
        name: 'BaseItemId',
        type: 'string',
        useNull: true,
        defaultValue: Util.getBlankGuid()
    },
    {
        name: 'Name',
        type: 'string',
        useNull: false,
        defaultValue: ''
    },
    {
        name: 'DisplayName',
        type: 'string',
        useNull: false,
        defaultValue: ''
    },
    {
        name: 'ExternalReferenceId',
        type: 'string',
        useNull: true,
        defaultValue: null
    }
]
});

Store:

Ext.define('Desktop.stores.products.GetProductFamiliesStore', {
extend: Ext.data.Store,
model: 'Desktop.models.products.DtoProductFamilyModel',
proxy: {
    type: 'jsonp',
    url: 'http://www.somejsonpwebservice.com',
    method: 'GET',
    pageParam: false, 
    startParam: false, 
    limitParam: false,
    timeout: 9000000,
    noCache: true,
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    sorters: [{
        property: 'Name',
        direction: 'ASC'
    }],
    sortRoot: 'Name',
    sortOnLoad: true,
    remoteSort: false,
    reader: {
        type: 'json'
    }
}
});

Combobox component utilizing the store:

    {
        xtype: 'combo',
        zzid: 'cmbProductManufacturersFamily',
        store: 'Desktop.stores.products.GetProductFamiliesStore',
        width: 250,
        labelWidth: 50,
        forceSelection: true,
        fieldLabel: Util.translate('Family'),
        emptyText: 'Select Product Family',
        margin: '0 0 0 10',
        displayField: 'Name',
        valueField: 'ProductFamilyId'
    }

Actual call to load store:

this.stoProductFamilies = this.cmbProductManufacturersFamily.getStore();
this.stoProductFamilies.load()

The data loads just fine, but the store refuses to sort my data. I'm loading over 100 dynamic records into a combobox and need this feature working. If anyone can provide insight as to what I'm doing wrong I would greatly appreciate it.


Solution

  • sortOnLoad, remoteSort and the sorters configurations are not set on the proxy, instead they are set on the store like this:

    Ext.define('Desktop.stores.products.GetProductFamiliesStore', {
        extend: Ext.data.Store,
        model: 'Desktop.models.products.DtoProductFamilyModel',
        sorters: [{
            property: 'Name',
            direction: 'ASC'
        }],
        sortRoot: 'Name',
        sortOnLoad: true,
        remoteSort: false,
        proxy: {
           type: 'jsonp',
           url: 'http://www.somejsonpwebservice.com',
           method: 'GET',
           pageParam: false, 
           startParam: false, 
           limitParam: false,
           timeout: 9000000,
           noCache: true,
           headers: { 'Content-Type': 'application/json;charset=utf-8' },
           reader: {
               type: 'json'
           }
        }
    });