PDA

View Full Version : Updating the totalProperty of the pagination bar



cham
24 Nov 2010, 11:25 PM
Hi All,

I am using Ext Js for my project and I have a scenario which need to add records to the grid. So, when a new record is added to the grid, I need to update the pagination bar accordingly. For Example "Displaying Record 1 -5 of 25 ".

However, in my scenario, it does not change the total records and the display the message as"Displaying Record 1 -1 of 0"

Following is my code sample.

// Message Reader
var messageReader = new Ext.data.JsonReader({
totalProperty: 'totalCount',
root:'messages'
}, Ext.data.Record.create([
{name: 'messageId'},
{name: 'message'},

]));

// Message Store
var messageStore = new Ext.data.GroupingStore({
baseParams:{ajax_command:'searchMessages'},
proxy: new Ext.data.HttpProxy({
url:'/messageReader/CIT.ajax'
}),
reader: messageReader,
sortInfo:{field: 'messageId', direction: "DESC"},
groupField:'',
remoteSort: true
});

bbar: new Ext.PagingToolbar({
id:'sentMessages_ptb',
displayInfo: true,
displayMsg: 'Displaying Records {0} - {1} of {2}',
store: messageStore,
pageSize: 20,
plugins: messageFilters,
emptyMsg: 'No Records to display'

doLoad : function(start) {
var selected = 1;
for (var i = 0; i < Ext.getCmp('receiver_message').items.length; i++) {
if (Ext.getCmp('receiver_message').items.items[i].checked) {
selected = Ext.getCmp('receiver_message').items.items[i].value;
}
}
var o = {}, pn = this.getParams();
o[pn.start] = start;
o[pn.limit] = this.pageSize;

if (this.fireEvent('beforechange', this, o) !== false) {
this.store.load({params:{start:start, limit:this.pageSize, message:Ext.getCmp('message_content').getValue(),
sendto:selected, locale:Ext.getCmp('language_message').getValue()}});

}}}),
// Certain listeners defined here

});

I am adding data to the grid using the following function.

function loadMessageDataToGrid(id, message) {
var recordDataMessage = Ext.data.Record.create([
{name: 'messageId'},
{name: 'message'}
]);
messageStore.add(new recordDataMessage({
messageId: id,
message: message,

}));
}
}

Please advice me how to update the record count when adding new records.

I would appreciate if someone can guide me to solve this problem. Thanks in advance.

Cham

Condor
25 Nov 2010, 7:02 AM
My PagingStore user extensions also contains an extended PagingToolbar that handles totalLength changes.

cham
26 Nov 2010, 3:02 AM
Hi Condor,

Thank you for your early reply.

Appriciate if you could elaborate a bit as i am new to EXt js.

Thanks

Cham

Condor
26 Nov 2010, 4:26 AM
I meant this thread (http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5).

cham
1 Dec 2010, 8:20 PM
Hi Condor,
Thank you very much for your information. I manage to solve the problem by adding the following code to the function called "loadMessageDataToGrid".
-------------------------------------------------------
messageStore.totalLength = messageStore.getTotalCount() + 1;
sentMessages.getBottomToolbar().updateInfo();
--------------------------------------------------------

this was in one of your previous posts.

Thank you very much for your help.

cham