Grid hanging when sorting

[qlc]

Hi,

I have an infinate grid that works great by default, it fetches pages nicely through the results.

However, when I click a column header to define a sort order on one of the columns, the grid just hangs with the "Loading" message even though I'm sending back the exact same data as I did before the sort (I'm ignoring the "sort" varible on the server side just for testing puposes at the moment.)

Since this is for an open source project any additional source you may need to assist can be made available.

Any help would be greatly appreciate. Thank you in advance.

Kind regards,
John.
I get this request on the server:

"GET /lextjsapi/reader/tblname?_dc=1361204535173&page=1&start=0&limit=10&sort=[{"property"%3A"id"%2C"direction"%3A"DESC"}] HTTP/1.1" 200 832 "http://lextjs/sa-test/app.html" "Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/533.3 (KHTML, like Gecko) rekonq Safari/533.3"

This is the code for the store:

Ext.define('MyApp.store.tblnameStore', {
    extend: 'Ext.data.Store',
    requires: [
        'MyApp.model.tblname'
    ],
    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            remoteSort: true,
            storeId: 'tblnameStore',
            model: 'MyApp.model.tblname',
            buffered: true,
            leadingBufferZone: 10,
            pageSize: 10,
            purgePageCount: 0,
            trailingBufferZone: 10,
            proxy: {
                type: 'ajax',
                url: 'http://lextjs/lextjsapi/reader/tblname',
                reader: {
                    type: 'json',
                    root: 'tblname'
                }
            }
        }, cfg)]);
    }
});

This is the code for the grid:

Ext.define('MyApp.view.MyGridPanel2', {
    extend: 'Ext.grid.Panel',
    height: 250,
    width: 450,
    title: 'My Grid Panel',
    store: 'tblnameStore',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            viewConfig: {
            },
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'id',
                    text: 'Id'
                },
                {
                    xtype: 'gridcolumn',
                    sortable: false,
                    dataIndex: 'name',
                    text: 'Name'
                },
                {
                    xtype: 'gridcolumn',
                    sortable: false,
                    dataIndex: 'address1',
                    text: 'Address1'
                },
                {
                    xtype: 'gridcolumn',
                    sortable: false,
                    dataIndex: 'city',
                    text: 'City'
                }
            ],
            dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    dock: 'bottom',
                    width: 360,
                    displayInfo: true,
                    store: 'tblnameStore'
                }
            ]
        });
        me.callParent(arguments);
    }
});

[sword-it]

Hi qlc,

Are you trying sorting grid panel locally on client? if yes you need to add remoteSort : false config into grid store.

for more info read API docs- http://docs.sencha.com/ext-js/4-1/#!...cfg-remoteSort

[qlc]

Hi,

I'm trying to do a remote sort on the server, not local. Do I have to turn off local sort somehow?

[qlc]

I have resolved the problem by removing leadingBufferZone,purgePageCount, and trailingBufferZone from the store.

Ext.define('MyApp.store.tblnameStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.tblname'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            remoteSort: true,
            storeId: 'tblnameStore',
            model: 'MyApp.model.tblname',
            buffered: true,
            pageSize: 10,
            proxy: {
                type: 'ajax',
                url: 'http://lextjs/lextjsapi/reader/tblname',
                reader: {
                    type: 'json',
                    root: 'tblname'
                }
            }
        }, cfg)]);
    }
});