Extjs Grid - no current page

Question

and thanks in advance for assistance with this issue.

I have a extjs 4.1 grid , populated with json loaded from the server. Paging is remote and each hunk of 25 items is served up properly from the server as valid json with the proper value in the totalProperty. Everything functionally works fine as far as loading and paging goes, there is just no page number in the paging bar. It looks like this. ok...Im not allowed to post an image...so here is a link it looks like this

here is the relevant code. I can post additional code if it would help troubleshoot.

var theStore = Ext.create('Ext.data.Store',
    {
        model: 'SearchResult',
        pageSize: 25,
        remoteSort: true,
        proxy:
        {
            type: 'ajax',
            url: '/Search/SubmitSimpleQuery',
            reader:
            {
                type: 'json',
                root: 'Results',
                totalProperty: 'totalHits'
            },
            extraParams:
            {
                searchText: theSearchText,
                beginDate: theBeginDate,
                endDate:theEndDate,
                collectionMatch:theCollection
            }
        }
    });
theStore.load();





var grid = Ext.create('Ext.grid.Panel',
    {
        store: theStore,
        width: '100%', 
        height: '100%', 
        columns:
        [

            {
                text: 'Title',
                dataIndex: 'title',
                width: '60%'

            },

            {
                text: 'Published Date',
                dataIndex: 'pubDate_ymd',
                renderer: renderDate
            },
            {
                text: 'Released Date',
                dataIndex: 'releaseDate_ymd',
                renderer: renderDate
            },
            {
                text: 'From',
                dataIndex: 'from',
                hidden: true

            },
            {
                text: 'To',
                dataIndex: 'to',
                hidden: true

            }
        ],
        dockedItems: [
        {
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            store: theStore,
            displayInfo: true,
            displayMsg: 'Displaying results {0} - {1} of {2}',
            emptyMsg: 'No results'
        }]

    });


Ext.create('Ext.panel.Panel',
{
    bodyPadding:25,
    width:'100%',
    renderTo:Ext.getBody(),
    items:[
        grid
    ]

});

the totalproperty is coming in via he json correctly - for example 108 which results in 5 pages. all paging works. when paging to page 2, page:2 , start:25, limit: 25 are all passed to the server, so ext knows what page it is, but its not getting into the current page box. do I need to then set that page value to a property on the proxy or store?

Im stumped and Ive been banging my head against this one for a while.

thanks.

btw, this is a similar problem ExtJS grid panel not showing page number but it was (apparently?) fixed adding the paging bar to dockeditems on the grid, which as you can see above is already the case.

tuespetre tuespetre · Accepted Answer · 2013-02-19T02:50:15

From the Sencha API Docs:

To use paging, you need to set a pageSize configuration on the Store, and pass the paging requirements to the server when the store is first loaded.

store.load({
    params: {
        // specify params for the first page load if using paging
        start: 0,
        limit: myPageSize,
        // other params
        foo:   'bar'
    }
});

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Paging

I think your problem is probably that you manually call theStore.load() without any such parameters. I don't think you need to call that at all.

Extjs Grid - no current page

1 Answers