PDA

View Full Version : Extjs Buffered Grid Paging Issue TotalCount (Dynamic Reader)



relics
28 Feb 2014, 8:13 PM
I have one Extjs Grid and want to add paging feature without using Paging Toolbar.

So the user will navigate to different pages through scrollbar.

If you see at the following example it is really a perfect one. http://jsfiddle.net/m97cv/
(http://jsfiddle.net/m97cv/)
But all the pagination happen because of TotalProperty of the store.

As per the example one need to set the 'TotalProperty' of the store then only the pagination will work.Because the store count (will be the first visible records) and store total count (will be the total records which will get loaded on scroll change)

As per the jsfiddle example you can set the TotalProperty the following way :



reader :
{
proxy:{
totalProperty : 'totalCount'
}
}

But in my case the store is dynamic.So I am not able to set the totalProperty of the store proxy. As per my code



Ext.define('MyApp.Store.myStore')
{
id:'widget.myStore',
readRecords:function(store,meta)
{
//other code
}
};

Ext.define('MyApp.Grids.gridpanel',
{
id: 'widget.gridpanel',
store : Ext.create('Ext.data.Store',
{
fields: [],
autoLoad: false,
buffered: true,
leadingBufferZone: 30,
pageSize: 15,
listeners: {
'metachange': function (store, meta) {
me.reconfigureLockable(store, meta.columns);
},
proxy: {
reader: 'myStore',
type: 'ajax',
api: {read: '/Servercall/ReadServerData'},
params: {},
extraParams: {}
}
}
});

Now I am not able to set the TotalProperty.

Can somebody help me out ?

Thanks

p.szuttenbach
4 Mar 2014, 12:41 PM
If you can't get the totalCount from the server response, maybe good idea is to load new page on demand, make Ext.view.View with template and button 'load more' then store.nextPage() to load until the response is empty.

relics
5 Mar 2014, 2:56 AM
But then to load previous records again there need to be a "Load Previous" button.
We want the pagind through scroll only.

p.szuttenbach
5 Mar 2014, 3:02 AM
You can also do sth like that:


this.el.on('click', function() {
var me = this;
me.getStore().nextPage({
addRecords: true
});
}, this, {
delegate: '.load-more'
});

Then you will append new records to store without loosing previous pages. Then you can achieve sth like infinite Ext.view.View which is much better then infinite grid with old fassion pagination. In this example you can also add listener to event of scrolling and then load nextPage

relics
5 Mar 2014, 4:16 AM
HI,


In the above code the click event is attacehd to the Grid ?
I want to attach the click event only for Scroll. How can I do it ?

and under which event the code need to put on ?

Thanks

p.szuttenbach
6 Mar 2014, 2:27 AM
You can try sth like:
grid.getEl().addListener('scroll', this.scrollEvent, this);

then

scrollEvent: function(e, t, eOpts) {
grid.getStore().loadPage({
addRecords: true
})
}