Ext.ux.LiveGrid

[mpereira]

I'm having a strange problem that seems to be an aborted conection by a timeout.
I'm using LiveGrid on a grid with 400+ entries. When I'm scrolling down these entries and a request is made for more data, sometimes an error occurs and the grid resets (goes back to the beginning). The timeout is set to 30 seconds, but the reset occurs in less time.
This is not a server issue as I can see the correct response on Fiddler (HTTP Debugger). This means that the response arrives in time. Debugging ext-base.js I can tell the following:


--> On a normal request:

1. handleReadyState function is called
2. POST is made
3. handleTransactionResponse function is called
4. releaseObject function is called

--> On a bugged request:

1. handleReadyState function is called
2. POST is made
3. abort function is called from window.setTimeout
4. handleTransactionResponse function is called
5. releaseObject function is called

This error occurs randomically and I have no idea of what is happening! Any ideas??

[changhua]

I came up with my own solution and it seems to work under ext 2.2.
It's a modification from MemoryProxy.

MyMemoryProxy = function(data, root, sortingFunctions){
    MyMemoryProxy.superclass.constructor.call(this);
    this.data = data;
    this.root = root;
    this.sortingFunctions = sortingFunctions;
    this.sortedData = {};
};

Ext.extend(MyMemoryProxy, Ext.data.DataProxy, {

    load : function(params, reader, callback, scope, arg){
        params = params || {};

        // possible params: start, limit, sort, dir
        
        var tmpData = { version: 1, total: 0 };
        tmpData[this.root] = [];

        var srcArr = this.data[this.root], destArr = tmpData[this.root], n, i;
        tmpData.total = srcArr.length;

        var field = params.sort;
        if ( !this.sortedData[field] ) {
            var arr = [];
            for ( i=0; i<srcArr.length; i++ )
                arr.push( srcArr[i] );
            if ( this.sortingFunctions && this.sortingFunctions[field] ) {
                arr.sort( this.sortingFunctions[field] );
            }
            else {
                arr.sort( 
                        function(a,b) {
                            if ( a[field]<b[field] )
                                return -1;
                            else if ( a[field]>b[field] )
                                return 1;
                            else
                                return 0;
                    });
            }
            this.sortedData[field] = arr;
        }
        
        srcArr = this.sortedData[field];
        
        if ( params.dir == "ASC" ) {
            n = Math.min( params.start+params.limit, tmpData.total );
            for ( i=params.start; i<n; i++ ) {
                destArr.push( srcArr[i] );
            }
        }
        else { // DESC
            var start = tmpData.total-1-params.start;
            n = Math.max( start-params.limit, -1 );
            for ( i=start; i>n; i-- ) {
                destArr.push( srcArr[i] );
            }
        }

        var result;
        try {
            result = reader.readRecords(tmpData);
        }catch(e){
            this.fireEvent("loadexception", this, arg, null, e);
            callback.call(scope, null, arg, false);
            return;
        }
        callback.call(scope, result, arg, true);
    },
    
    
    update : function(params, records){
        
    }
});

And then define bufferedDataStore as

var bufferedDataStore = new Ext.ux.grid.BufferedStore({
        autoLoad   : false,
        bufferSize : 300,
        proxy      : new MyMemoryProxy( your_data, your_root, your_sortingFunctions ),
        url        : 'dummy.php',
        reader     : bufferedReader,
        sortInfo   : {field: 'id', direction: 'ASC'}
    });

A dummy url is required. Replace your own three parameters in the proxy definition.

Feedback is welcomed.

Thanks a lot.

[ecarrenho]

changhua,

Thanks for the help. If you could explain what is the root cause of the timer expiration and how your solution resolves it, we appreciate.

Regards,
Evandro.

[dkuz]

I have noticed that, when i load data into BufferedStore Element.update function is been called 3 times, with the same html string. Did anybody else noticed this problem? Any ideas?

Thank you.

[ThorstenSuckow]

I'm proud to announce the release of Ext.ux.Livegrid 0.3a1

A lot of work has been put into this release. Major code refactoring with lots of improvements along with the support for Ext2.2. The UI matches now the usual Ext.grid-components.



As of V0.3a1, Ext.ux.Livegrid is now released under the terms of the GPL V3.

Furthermore, there is a backward compatibility break: The namespace has been changed to Ext.ux.grid.livegrid. Please update your code accordingly.

Changelog is available on the first page, as usual.

Happy coding!


Thorsten

[Mots]

Hi Mindpatterns,

First of all I have to say great extension!

Have you (or anybody else for that matter) ever tried to combine the live grid with MaximGB's tree grid?

I know that in my company one of the biggest issues to solve in any web project was the presentation of large amounts of data in a tree. I think that if the mechanisms from the live grid are applied to the tree grid (or vice versa), this would solve this issue once and for all.

I will take a look at this myself in the next days, but perhaps there is already some experience with this out there.

[ThorstenSuckow]

I know that in my company one of the biggest issues to solve in any web project was the presentation of large amounts of data in a tree. I think that if the mechanisms from the live grid are applied to the tree grid (or vice versa), this would solve this issue once and for all.

I will take a look at this myself in the next days, but perhaps there is already some experience with this out there.

Hi Mots,

the Ext.tree.TreePanel provides this functionality already- well, sort of: You can lazy load the nodes when you specify a "Ext.tree.TreeLoader" in the "loader" property of the TreePanel. The API doc should help you here.

HTH


Regards

Thorsten

[Mots]

Hi Thorsten,

Actually, we first used Ext.tree.TreePanel (Actually Ext.tree.ColumnTree), because we need a tree with additional columns displayed. However, we then switched to the TreeGrid because the column tree does not have all the nice features a grid has (out of the box sorting, hiding columns, drag and drop of columns, and so on).

The TreeGrid also has lazy loading support which we already use and which works well, the problem is that trees that load the content of a folder in the tree on demand still have a performance problem when there is a lot of entries in one folder (which is the case quite often).

[ub3rn00b]

just a quick one, I am moving my current implementation of this component from Ext 2.1 as we are having a minor issue where the bottom most records are truncated, I am assuming this is to do with the viewport height bug as according to firebug the proxy is returning all the relevant records, however the last 10 or so are not being scrolled to.

This is my declaration code below, it generates 'n' grids in a tab panel

var bufferedDataStore_billingExport_<?= $BillingTableRow[0]?> = new Ext.ux.grid.livegrid.Store({
		autoLoad   : true,
		bufferSize : 600,
		reader     : bufferedReader,
		sortInfo   : {field: 'date_field', direction: 'ASC'},
		url        :    'proxies/billingproxy.php?table=<?= $BillingTableRow[0]?>'
	});	
	
	var bufferedView_billingExport_<?= $BillingTableRow[0]?>= new Ext.ux.grid.livegrid.GridView({
		nearLimit      : 200,
		id: 						'BufferedViewBillingExport',
		loadMask : {
		msg : 'Please wait...'
	}});
	
	var bufferedGridToolbar_billingExport_<?= $BillingTableRow[0]?> = new Ext.ux.grid.livegrid.Toolbar({
		view        : bufferedView_billingExport_<?= $BillingTableRow[0]?>,
		displayInfo : true
	});
	var searchBox_<?= $BillingTableRow[0]?>_txt = new Ext.form.TextField({
			id: 'searchBox_<?= $BillingTableRow[0]?>',
			enableKeyEvents: true
	});
	
	var grid_billingExport_<?= $BillingTableRow[0]?> = new Ext.grid.GridPanel({
		ds             : bufferedDataStore_billingExport_<?= $BillingTableRow[0]?>,
		enableDragDrop : false,
		cm             : colModel,
		listeners: {activate: handleActivate_<?= $BillingTableRow[0]?>},
		//autoExpandColumn: 2,
		sm             : bufferedSelectionModel,
		id						 : 'dataGridPanel_<?= $BillingTableRow[0]?>',
		loadMask       : {
				msg : 'Loading...'
		},
		view           : bufferedView_billingExport_<?= $BillingTableRow[0]?>,
		title          : '<?= $DisplayTitle?>',
		bbar           : bufferedGridToolbar_billingExport_<?= $BillingTableRow[0]?>,
		tbar					 : [
			{text: 'Quicksearch:'	},
			searchBox_<?= $BillingTableRow[0]?>_txt
		,{
			xtype:'button',
			text:'X',
			handler: function(){
				if (searchBox_<?= $BillingTableRow[0]?>_txt.getValue().length!=0) {
						searchBox_<?= $BillingTableRow[0]?>_txt.setValue('');	
						bufferedDataStore_billingExport_<?= $BillingTableRow[0]?>.load();
				}
			}
		}]

	});	
....

I know it looks a bit clunky but it does work, other than the scrolling issue, however when I move across to the latest version of this component it fails to render with the following error popping up in firebug

"grid is undefined Toolbar.js (line 112)
var st = grid.getStore();"

Do we have to change the way that our toolbars are generated in the new component now?

[ThorstenSuckow]

Do we have to change the way that our toolbars are generated in the new component now?

Yeah it got kind of messed up with the latest release. If you need the toolbar, make sure the instance of the grid-panel you want to create is available to the time the toolbar is instantiated. Best way would be to extend Ext.grid.GridPanel and create the Toolbar in the "initComponent()" method, referencing the grid using "this".

Will be fixed in the next release, however.