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

[Buzzwords]

Ignore my previous question. I've found the functionality I was looking for. PagingMemoryProxy is just what I needed. It allows Ext.toolbar.Paging to control paging of local data contained in an Ext.data.Store. Very helpful! The code behind the Sliding Pager example under the Extjs4 Grid Examples clearly demonstrates usage.

[atul.sachan@capgemini.com]

Still i am looking for answer, any one can reply???

[farfar]

This helped me alot. I was especially struggling with a problem that the gridpanel initially contained all records instead of just the 5 I set with pageSize : 5. Though when I started to navigate the pagingtoolbar it displayed 5 correctly. the doRefresh override took care of that though.

[brprashanth]

Hi,

Im trying to implenting pagination. I have a webservice which returns "Total Count" and records.
From client side, I have json store which pulls data from this service.
I have ext grid which binds to this store. Im not been able to implement paging. Ext version used 4.0

// Create store
var myStore = new Ext.data.JsonStore({
pageSize: 5,
// Load data at once
//autoLoad: true,
autoLoad: {params: {start: 0, limit: 5, regionId: 1}},
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: 'WebService1.asmx/GetNewPeopleForPaging',
headers: {
'Content-type': 'application/json'
},
reader: {
type: 'json',
root: 'd.Peoples',
totalProperty: 'Count',
successProperty: 'success'
},
method: 'POST'
}),
fields: ['Id', 'Name', 'Address', 'Type'] // Simple definition of column
});
　
　
var grid = new Ext.grid.Panel({
// Set store
store: myStore,
remoteSort : true,
columns: [{
header: 'Id',
dataIndex: 'Id',
flex: 1,
hidden: true,
hideable: false
}, {
header: 'Name',
dataIndex: 'Name',
flex: 1
}, {
header: 'Address',
dataIndex: 'Address',
flex: 1
}, {
header: 'Type',
dataIndex: 'Type',
flex: 1
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: myStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
}],
}),
// Render grid to dom element with id set to panel
renderTo: 'district_grid'
});

[atul.sachan@capgemini.com]

try this:
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'partData',
dock: 'bottom',
displayInfo: false,
items :[]
}]

Hi,

Im trying to implenting pagination. I have a webservice which returns "Total Count" and records.
From client side, I have json store which pulls data from this service.
I have ext grid which binds to this store. Im not been able to implement paging. Ext version used 4.0

// Create store
var myStore = new Ext.data.JsonStore({
pageSize: 5,
// Load data at once
//autoLoad: true,
autoLoad: {params: {start: 0, limit: 5, regionId: 1}},
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: 'WebService1.asmx/GetNewPeopleForPaging',
headers: {
'Content-type': 'application/json'
},
reader: {
type: 'json',
root: 'd.Peoples',
totalProperty: 'Count',
successProperty: 'success'
},
method: 'POST'
}),
fields: ['Id', 'Name', 'Address', 'Type'] // Simple definition of column
});
Ext.define('USERS.view.Grid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
columns: [{
header: 'Id',
dataIndex: 'Id',
flex: 1
}, {
header: 'Name',
dataIndex: 'Name',
flex: 1
}, {
header: 'Address',
dataIndex: 'Address',
flex: 1
}, {
header: 'Type',
dataIndex: 'Type',
flex: 1
}]
});

var grid = new Ext.grid.Panel({
// Set store
store: myStore,
remoteSort : true,
columns: [{
header: 'Id',
dataIndex: 'Id',
flex: 1,
hidden: true,
hideable: false
}, {
header: 'Name',
dataIndex: 'Name',
flex: 1
}, {
header: 'Address',
dataIndex: 'Address',
flex: 1
}, {
header: 'Type',
dataIndex: 'Type',
flex: 1
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: myStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
}],

}),

// Render grid to dom element with id set to panel
renderTo: 'district_grid'
});

[brprashanth]

try this:
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'partData',
dock: 'bottom',
displayInfo: false,
items :[]
}]

Thank you Atul.
In such a case, when I click on the "Next" page to pull the next page, how does the parameter go to webservice.

[ash4aque]

Say if I am having 10 pages of 15 records each and if I am in page 5, and apply filter which filters out 30 records(2 page) than the below message is displaying as: page 5 of 2 which i believe should be page 1 of 2.
Please help.

Yes, that's the problem I described.

1. Go to page 15 (shows records 71-75)
2. Filter the records (e.g. 10 remaining)
3. Page 15 shows as blank (technically correct)
4. Go to page 1 (shows records 1-5)

Filtering (and probably sorting too) should reset the page to 1.

[farfar]

Check out the original post by Condor again. If it is an ok solution for you (that the store resets to page 1) then do a forced reload. it works well for me.

Say if I am having 10 pages of 15 records each and if I am in page 5, and apply filter which filters out 30 records(2 page) than the below message is displaying as: page 5 of 2 which i believe should be page 1 of 2.
Please help.

[ash4aque]

I am struggling to find out which is the right post by Condor for the solution I am looking for? As there are are couple of more solution also exist in the thread, Could you please direct me there?

Check out the original post by Condor again. If it is an ok solution for you (that the store resets to page 1) then do a forced reload. it works well for me.

[farfar]

http://www.sencha.com/forum/showthre...gingStore-v0.5

Ext.override(Ext.PagingToolbar, {     
        doRefresh: function(){         
        delete this.store.lastParams;         
        this.doLoad(this.cursor);         
    } 
});

if you change this.cursor to 0 you will reset the page to 1. the doLoad loads records from the number you give as argument. sorry, I was a bit unclear before.

I am struggling to find out which is the right post by Condor for the solution I am looking for? As there are are couple of more solution also exist in the thread, Could you please direct me there?