PDA

View Full Version : Buffered Grid ux does not work with array grid example



mprice
23 Jun 2009, 7:00 AM
I am testing out the buffered grid ux and am having challenges. I tried to convert the array grid example (examples/grid/array-grid.html) to be buffered by adding the reference to the ux here:



<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="array-grid.js"></script>
<script type="text/javascript" src="../ux/BufferView.js"></script>


and added the buffered grid view line here:



var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid',
view: new Ext.ux.BufferView({scrollDelay: false})
});


Firebug yields the following error at line 171 in the buffer grid ux file:



this.getRow(i) is undefined
this.getRow(i).innerHTML = html;


I am using 3.0 RC2. Am I trying to use the ux incorrectly? Please help, thank you!

andrukit
24 Jun 2009, 3:26 AM
I'm also using Array data and the change i made seems to make it work fine

Edit this line at 'BufferView.js' in red


doUpdate: function(){
if (this.getVisibleRowCount() > 0) {
var g = this.grid, cm = g.colModel, ds = g.store;
var cs = this.getColumnData();

var vr = this.getVisibleRows();
for (var i = vr.first; i <= vr.last; i++) {
// if row is NOT rendered and is visible, render it
if(!this.isRowRendered(i) && this.getRow(i)){
var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
this.getRow(i).innerHTML = html;
}
}
this.clean();
}
},

mprice
24 Jun 2009, 3:51 AM
Worked for me too, thanks! Ext team - should this be moved to Bugs and corrected in the final release?

qhas
25 Sep 2009, 11:56 AM
:D

Just would like to say this fix worked for me as well. As I had the same problem.

I think it should be included in the next release if not already.

Pachat
16 Jan 2010, 12:57 PM
:D

Just would like to say this fix worked for me as well. As I had the same problem.

I think it should be included in the next release if not already.

Same for me.
But obviously, the bug is still present in the final release (http://www.extjs.com/forum/showthread.php?p=428053).

buz
22 Feb 2010, 5:18 AM
The bug still exists. (See examples (http://www.extjs.com/deploy/dev/examples/ux/BufferView.js)).

There is another bug; When using tabs, you go back and reload the store and then go back to the grid only the first 3 rows will be visible.

small fix (Add this function to the bufferview class):


initUI: function(grid){
Ext.ux.BufferView.superclass.initUI.apply(this, arguments);
grid.on('activate', function(){
if (grid.rendered)
this.doUpdate();
}, this);
}
DaniŽl

ivip
5 Jul 2010, 1:13 AM
The bug still exists. (See examples (http://www.extjs.com/deploy/dev/examples/ux/BufferView.js)).

There is another bug; When using tabs, you go back and reload the store and then go back to the grid only the first 3 rows will be visible.

small fix (Add this function to the bufferview class):


initUI: function(grid){
Ext.ux.BufferView.superclass.initUI.apply(this, arguments);
grid.on('activate', function(){
if (grid.rendered)
this.doUpdate();
}, this);
}
DaniŽl
Can someone help with the initUI function.I`m trying to modify it to work with 3.2.1 but with no success.
I can`t make
grid.on('activate', function(){ to work.Any ideas ?