View Full Version : Ext.ux.grid.BufferView with large images lazy loading

30 Jun 2011, 5:04 AM

I'm using the 3x Ext.ux.grid.BufferView example but in a cell i want to render an image. So i use a renderer with an img tag. The images are essentially jpeg scans of A4 documents.

The idea is to create something like Google's lazy load book reader eg (http://books.google.com/books?id=9GB9htDEzOYC&printsec=frontcover#v=onepage&q&f=false) too see exactly what i mean.

What i'm finding is that i have to specify an actual rowheight. The other thing is that even though only row 1 is visible, the grid/view will preload the other images (say 10 of them over 800px height each).

view: new Ext.ux.grid.BufferView({
rowHeight: 800,
scrollDelay: false,
forceFit: true,

renderer: function(val, p, r) {
return '<img src="' + val + '"/>';

Not much code here as the example i'm following is exactly like: http://dev.sencha.com/deploy/ext-3.3.1/examples/grid/buffer.js only that i have an additional image in another column.

I think the img tag doesn't "work" with bufferedview? Should i be looking at something else (ie. not extjs and maybe some google code somewhere) ?