PDA

View Full Version : Buffered Grid - possible to have COLUMNS be buffered



sgarco
17 Mar 2014, 6:19 AM
Hi,

I've seen the info for buffered Grids for ROWS (in the vertical scroll direction)

Is it possible to have buffering for the Grid for COLUMNS (in the horizontal direction)

Any examples on Ext sites or elsewhere ?

Thanks in adavance for any info

scottmartin
17 Mar 2014, 7:19 AM
There is no buffering for columns. The best solution is to setup multi columns arrays and use grid.reconfigure to update the active set.

sgarco
17 Mar 2014, 10:58 AM
Hi Scott, thanks for quick reply

If I need to keep the first 3 columns of the Grid "locked" so as to NOT refresh them and keep whatever state they may have, can I do that usign approach you suggest ? So, not only do I want to load new data for columns 4-8 without server hit, I also want to NOT redraw columns 1-3

Thanks again, I'm looking into grid.reconfigure

scottmartin
17 Mar 2014, 11:15 AM
This may help in the fact that when you lock a grid, it creates 2 grid (grid.lockedGrid, grid.normalGrid) .. so you can reconfigure the as needed

You can paste the following code to our fiddle and run:
https://fiddle.sencha.com/#home



Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var columns = [
{ header : 'Name', dataIndex : 'name', locked: true },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
];

var columnsNew = [
{ header : 'Change', dataIndex : 'change'},
{ header : 'Email', dataIndex : 'email', flex : 1 }
];

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : store,
columns : columns,
height : 200,
width : 400,
renderTo : Ext.getBody()
});

setTimeout(function(){
grid.normalGrid.reconfigure(store,columnsNew);
}, 1000);

});