Ext.ux.data.PagingStore [v0.5]

[Condor]

You could set store.start = 0 before filtering the store.

[Woodlander]

Hi,

I'm working on updating a rather big ASP.Net based ExtJs application from 2.2 to 3.3. The earlier version used PagingMemoryProxy which stoped working after updating. I'm now trying to replace it with PagingStore instead. In order to learn PagingStore I tried to write a simple page with a grid that loads a list of users. Strange thing is that the first time the grid populates it shows all >1000 users on one page (Display text says "Displaying users 1 - 1046 of 1046). First after refreshing the grid or clicking next page, the correct paging kicks in. What am I doing wrong?

Ext.onReady(function() {
        Ext.QuickTips.init();

        var record = Ext.data.Record.create([
            { name: 'Name' },
            { name: 'Id' }
        ]);

        var reader = new Ext.data.JsonReader({ root: 'rows' }, record);

        var ds = new Ext.ux.data.PagingStore({
            proxy: new Ext.data.HttpProxy({
                url: 'WebServices/User.asmx/GetUsers',
                method: 'POST',
                headers: { 'Content-type': 'application/json' }
            }),
            autoLoad: Ext.encode({params:{start:0, limit:30}}),
            reader: reader,
            remoteSort: true
        });


        var cm = new Ext.grid.ColumnModel([
            { id: 'Name', header: "Name", width: 60, sortable: true, dataIndex: 'Name' },
            { id: 'Id', header: "Id", width: 200, sortable: true, dataIndex: 'Id' }
        ]);
        
        var toolbar = new Ext.PagingToolbar({
            pageSize: 30,
            store: ds,
            displayInfo: true,
            displayMsg: 'Displaying users {0} - {1} of {2}',
            emptyMsg: "No users to display"

        })

        var grid = new Ext.grid.GridPanel({
            id: 'myGrid',
            store: ds,
            width: 500,
            height: 500,
            cm: cm,
            viewConfig: {
                forceFit: true
            },
            style: 'padding: 10px;',
            stripeRows: true,
            renderTo: 'divEmployees',

            //Paging
            bbar: toolbar
        });
        

    });

[Condor]

Why are you encoding the parameters? I recommend:

autoLoad: {params:{start:0, limit:30}},

Also, I recommend using the Ext.ux.PagingToolbar that comes with PagingStore, instead of Ext.PagingToolbar (not required, but fixes some bugs).

[Woodlander]

Why are you encoding the parameters? I recommend:

autoLoad: {params:{start:0, limit:30}},

Also, I recommend using the Ext.ux.PagingToolbar that comes with PagingStore, instead of Ext.PagingToolbar (not required, but fixes some bugs).

Thank you for your reply!

Removing the Ext.Encode gives me an error: "Invalid JSON primitive" and I think it is because the POST sends the data like this : start=0&limit=30.

Setting autoLoad: true loads the users but with the same problem with all users on one page. The toolbar still shows Page 1 of 35 - Displaying 1 of 1046 users. I replaced Ext.PagingToolbar with Ext.ux.PagingToolbar.

[Condor]

That's because you are setting the header to Content-type:headers:application/json.

Do you actually want to send application/json and not application/x-www-form-urlencoded data?

In that case you should not be doing this by setting the Content-type, but by changing the parameters in the beforeload, e.g.

listeners: {
  beforeload: function(store, options) {
    options.jsonData = Ext.apply({}, options.params, store.baseParams);
  }
}

[Woodlander]

Thanks! Changing the parameters in the beforeload did the trick.

[buergi]

Hi Condor!

I use the PagingGroupingStore with over 2000 records and a limit of 50. After filtering I have 900 records left and I need to iterate through every record (or row). What's the best trick to do that?

[Condor]

You mean all filtered records on all pages? Use:

pagingStore.allData.each(function(record){...});

[buergi]

Yep, perfect! You're my localhost hero ;-)

btw: Is there a way to select records on different pages? My selection is gone after a pagechange.

[Condor]

There is a plugin for CheckboxSelectionModel that makes it remember selections across pages (see User Extension forum).