Infinate grid hangs when trying to sort on column

[qlc]

Hi,

(I am creating a new thread since it seems that the previous one has been corrupted as I am unable to view or edit it anymore).

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

[Animal]

You have a paging toolbar! You are retrieving your data page by page!

How can this fit with a sparsely loaded (buffered) store?

Use one or the other.

[qlc]

I removed the toolbar, but sorting still hangs:

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

        me.callParent(arguments);
    }

});

[qlc]

This is the PHP code on the server side that is ressponding:

echo json_encode(array('success' => true, 'total' => 1000, $model_name => $tblnameRows));

[qlc]

It seems that ExtJS 4 is making the propper web call to get the sorted data from the server with the AJAX request.

But, with the lack of response I have to wonder if is this at all doable with this product?

[qlc]

I don't know if it makes a difference, but the code was generated by Sencha Architect.

[qlc]

I have resolved the problem by removing leadingBufferZone,purgePageCount, and trailingBufferZone from the store. The store now looks like this:

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