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: '',
    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.

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.

• javascript
• sorting
• extjs
• store

1 Answer 1

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'
       }
    }
});