GridPanel not displaying until all rows are loaded, what to see it fill row by row

[Zeus_Apollo]

Hi All,

This is my first post and I am new to ExtJS so please go easy on me

I have a large non-paged GridPanel that I want to display. The problem is that with 500+ rows the browser just sits there empty for many seconds and then all of a sudden the entire table appears. What I would like to do is have the GridPanel title and headers show up immediately and then have the table fill in row by row as the data is processed and added to the store.

I am creating the GridPanel with a Store that initially only has one recored. I then call render on my grid and THEN add the additional rows - but they still only appear all at once. Please tell me what I am doing wrong! I've been banging my head on this all day.

Here is my code (and if this is helpful to understand it, the data is all in html divs which I am grabbing and then putting into the datastore)

var DataRecord = Ext.data.Record.create([
    fields
]);
var store = new Ext.data.Store({
              proxy: new Ext.data.MemoryProxy([rowData]), //only has one row at this point
              reader: new Ext.data.ArrayReader({},fields)
});

var grid = new GridPanel({
            store: store,
            columns: headers,
            stripeRows: true,
            autoHeight: true,
            clicksToEdit: 1,
            title: title,
            enableColumnHide: true,
            constrain: true,
            viewConfig: { 
                forceFit: true,
                scrollOffset: 0             
});

grid.render(tableName);
store.load();

//Now here is where I'm attempting to add the bulk of the data
        for (var r = 0; r < rows; r++) {
            var values = {};
            for (var c = 0; c < cols; c++) {
               var elemId = tableName + "Row" + r + "Column" + c;
               var element = document.getElementById(elemId);
               var text = element.innerHTML;
                    
               var fieldId = tableName + "Column" + c;
               values[fieldId] = text;
            }
            store.add(new DataRecord(values));
            store.commitChanges();  //this seems to do nothing for me
 }

What is interesting is that if I put an alert after the
grid.render(tableName);
I do see the column headers appear before the data, then when I click ok on the alert the box stays frozen on the screen until all the data is rendered.

Any help is appreciated, thanks!

[tryanDLS]

Take a look at the extensions forum - there are number of different grids extensions to handle large resultsets. I think the one you want might be called LiveGrid.

[Zeus_Apollo]

I did see the LiveGrid but thought that was for working with database ResultSets? My data is all in the HTML document.

Is there any way to get the rows to fill in one by one? Thanks!

[tryanDLS]

I don't think anyone has done that. You could try to adapt LiveGrid to add rows from some local object. Or you could attempt to load only say the first 50 rows of your array in the grid, then after rendering add records to the store in chunks in a loop when the grid is scrolled.

[Zeus_Apollo]

Thank you for your quick replies. The grid itself has autoHeight, so it never displays scrollbars.

You meant scrollbars on the grid not the browser right? If I could somehow capture it when the users scrolls in the browser that might work. If there are any examples you could point me to that would be helpful. I've very new to this (and JavaScript in general).

Thank you!

[PierceSD]

Are you transforming an existing HTML table into an Ext Grid?

If so, you might be better off putting the data into a JavaScript array, rather than an HTML table. If it's still too slow, you could try the LiveGrid extension with the Paging Memory Proxy extension, or use the PagingStore extension with the Ext PagingToolbar.

Or you could wait for Ext 3.0 and use the zippy buffered rendering grids.

[Zeus_Apollo]

Yes it is existing HTML data (not a table but a bunch of divs). I could write it into an array instead of html. The problem is that its not simple text, it can have hrefs and additional divs for style information. If I wrote all of that into the array would it load more effeciently? It would be less DOM lookups but would be harder for me to grab the style. Unfortunately, I can't make a corresponding style array to easily - this data is all being auto generated and I have to work with what is there.

Would upgrading to 3.0 solve my problems? I was going to waiting until it was a point something other than 0 release, but if this will solve the source of my frustrations now I could give it a try Are there any examples of the buffer you are referring too?

The paging memory proxy only works with the paged grid right? I can't do anything with paging because the entire thing is supposed to display in one large table.

Thank you for your reply!

[mjlecomte]

Ext 3 has a BufferedView that might interest you.

[Zeus_Apollo]

Thank you, are there any examples of the buffered view you could point me towards?

[mjlecomte]

Did you look at the new example in the demos?
http://extjs.com/deploy/ext-3.0-rc1/examples/
http://extjs.com/deploy/ext-3.0-rc1/...id/buffer.html