PDA

View Full Version : 4.2 bufferedrenderer problem



osbortio
7 May 2013, 12:37 PM
I am trying to use the new grid bufferedrenderer plugin with a store that does not have paging but has a totalsProperty. The grid does not display any rows. I have verified the store does contain results and if I comment out the bufferedrenderer plugin, rows are displayed fine in the grid.

Does use of bufferedrenderer require a store with paging?

My store code:
Ext.define('FishPlants.store.Plants', {
extend: 'FishPlants.store.BaseStore',
model: 'FishPlants.model.Plant',
storeId: 'Plants',
autoLoad: false,
autoSync: true,
remoteFilter: true,
sorters: [{ property: 'fishPlantId' }],
proxy: {
type: 'enunciate',
url: '/fishplantservice/webappservice/plants/',
reader: {
type: 'json',
totalProperty: 'totalCount',
root: 'results',
successProperty: 'success'
}
}
});

My grid code:
xtype: 'gridpanel',
id: 'plantSearchGrid',
height: 550,
margin: '10 0 0 10',
plugins: {
ptype: 'bufferedrenderer',
trailingBufferZone: 20, // Keep 20 rows rendered in the table behind scroll
leadingBufferZone: 50 // Keep 50 rows rendered in the table ahead of scroll
}

7 May 2013, 5:38 PM
To create a buffered grid, you don't need any of that nonsense in your gridpanel.

This example works perfectly.




Ext.define('MyModel', {
extend : 'Ext.data.Model',
fields : [
'city',
'datehired',
'department',
'dob',
'fullName',
'id',
'maritalstatus',
'middle',
'salary',
'state',
'street',
'title',
'zip',
{
name : 'firstName',
mapping : 'firstname'
},
{
name : 'lastName',
mapping : 'lastname'
}

]
});

var jsonStore = Ext.create('Ext.data.Store', {
model : 'MyModel',
autoLoad : true,

buffered : true,
pageSize : 150,
leadingBufferZone : 150,
trailingBufferZone : 150,

proxy : {
type : 'jsonp',
url : 'http://extjsinaction.com/dataQuery.php',
reader : {
totalProperty : 'totalCount',
root : 'records'
}
}
});

var columns = [
{
dataIndex : 'firstName',
header : 'First Name',
width : 70
},
{
dataIndex : 'middle',
header : 'Middle',
width : 70
},
{
dataIndex : 'lastName',
header : 'Last Name',
width : 70
},
{
dataIndex : 'maritalstatus',
header : 'M',
flex : 1

},
{
dataIndex : 'department',
header : 'Department',
width : 180
}
];

Ext.create('Ext.grid.GridPanel', {
renderTo : Ext.getBody(),
height : 250,
width : 500,
frame : true,
title : 'Paging GridPanel',
store : jsonStore,
loadMask : true,
remoteSort : true,
columns : columns,
selModel : {
pruneRemoved : false
}

});

osbortio
8 May 2013, 8:36 AM
Thanks. Actually I got the bufferedrenderer working with a normal store without paging. I'm not entirely sure what the problem was in the first place. And I love the grid performance now!

The reason I want to use the bufferedrenderer instead of a buffered store is so that sorting and filtering can be accomplished on the grid on the view side. According to the blogs I've read, this wouldn't be possible with a buffered store.