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.

score 1 · Answer 1 · answered Feb 19 '13 at 02:50

1

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.

answered Feb 19 '13 at 02:50

tuespetre

1,827
2
18
30

Thats a good idea to check. I do set pagesize in the store. I just checked the paging requirements and they are automatically being sent to the server. So on initial load Page=1, start=0 and limit= 25 are properly being sent. (the explicit store.load was more a result of debugging and trying to isolate things better, it didnt work doing auto load either unfortunately) – ELG Feb 19 '13 at 03:28
Have you inspected the element on the page to verify that the `value` attribute is empty? In the picture, the input field looks to be styled oddly, perhaps the value is obscured from view? – tuespetre Feb 19 '13 at 04:10

Extjs Grid - no current page

1 Answers1