1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    18
    Vote Rating
    1
    qlc is on a distinguished road

      0  

    Default Infinate grid hangs when trying to sort on column

    Infinate grid hangs when trying to sort on column


    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:
    Code:
    "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:
    Code:
    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:
    Code:
    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);
        }
    });

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    18
    Vote Rating
    1
    qlc is on a distinguished road

      0  

    Default Toolbar removed, but still hanging.

    Toolbar removed, but still hanging.


    I removed the toolbar, but sorting still hangs:

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

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    18
    Vote Rating
    1
    qlc is on a distinguished road

      0  

    Default Server side code

    Server side code


    This is the PHP code on the server side that is ressponding:
    Code:
    echo json_encode(array('success' => true, 'total' => 1000, $model_name => $tblnameRows));

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    18
    Vote Rating
    1
    qlc is on a distinguished road

      0  

    Default Help?

    Help?


    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?

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    18
    Vote Rating
    1
    qlc is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    18
    Vote Rating
    1
    qlc is on a distinguished road

      0  

    Default Solved

    Solved


    I have resolved the problem by removing leadingBufferZone,purgePageCount, and trailingBufferZone from the store. The store now looks like this:
    Code:
    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)]);
        }
    });

Thread Participants: 1

Tags for this Thread