Ext.ux.LiveGrid

[Gabor Turi]

Hi, I ask your help.
I add rows to a LiveGrid with "insert" function, but all goes wrong when the scrollbar would appear.
Why may this be?


The original store and gridview work.

Ext.onReady(function() {

    var columns = [ {header: 'Id', dataIndex: 'id', name: 'id'} ];

    var grid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        width: 200, height: 100,
        columns: columns,
        view: new Ext.ux.grid.livegrid.GridView({ nearLimit: 100 }),
        store: new Ext.ux.grid.livegrid.Store({
            bufferSize: 300,
            columns : columns
        }),
        cm: new Ext.grid.ColumnModel(columns)
        //view: new Ext.grid.GridView(),
        //store: new Ext.data.Store({columns : columns}),
    });

    new Ext.Button( {
        renderTo: Ext.getBody(),
        text: 'Add row',
        handler: function() {
            grid.getStore().insert(
                grid.getStore().getCount(),
                new Ext.data.Record({ id: grid.getStore().getCount() })
            );
        }
        
    });

});

Sorry for my English.

[ThorstenSuckow]

Hi, I ask your help.
I add rows to a LiveGrid with "insert" function, but all goes wrong when the scrollbar would appear.
Why may this be?


The original store and gridview work.

Ext.onReady(function() {

    var columns = [ {header: 'Id', dataIndex: 'id', name: 'id'} ];

    var grid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        width: 200, height: 100,
        columns: columns,
        view: new Ext.ux.grid.livegrid.GridView({ nearLimit: 100 }),
        store: new Ext.ux.grid.livegrid.Store({
            bufferSize: 300,
            columns : columns
        }),
        cm: new Ext.grid.ColumnModel(columns)
        //view: new Ext.grid.GridView(),
        //store: new Ext.data.Store({columns : columns}),
    });

    new Ext.Button( {
        renderTo: Ext.getBody(),
        text: 'Add row',
        handler: function() {
            grid.getStore().insert(
                grid.getStore().getCount(),
                new Ext.data.Record({ id: grid.getStore().getCount() })
            );
        }
        
    });

});

Sorry for my English.

Hi,

I've tested your code with FF 3 and it works without errors. Which browser are you using, and what kind of error do you get.

Besides that, I have a few suggestions for your code:

Ext.onReady(function() {

    var columns = [ {header: 'Id', dataIndex: 'id', name: 'id'} ];
    var grid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        width: 200, height: 100,
        columns: columns,
        view: new Ext.ux.grid.livegrid.GridView({ nearLimit: 100 }),
        store: new Ext.ux.grid.livegrid.Store({
            bufferSize: Number.MAX_VALUE,
            columns : columns
        }),
        cm: new Ext.grid.ColumnModel(columns)
    });

    new Ext.Button( {
        renderTo: Ext.getBody(),
        text: 'Add row',
        handler: function() {
            var store = grid.getStore();
            var rec   = new Ext.data.Record({ id: store.getCount() });
            var ind = store.findInsertIndex(rec);
            grid.getStore().insert(ind, rec);
        }

    });

});

If you do not intend to use a proxy to load the data from, you should set the bufferSize property to a high enough value.

Number.MAX_VALUE

works just fine in that case.

Another thing would be to find the insert index of the record before you add it to the store. This is the recommended way of inserting records into a Ext.ux.grid.livegrid.Store:

var store = grid.getStore();
var rec   = new Ext.data.Record({ id: store.getCount() });
var ind = store.findInsertIndex(rec);
grid.getStore().insert(ind, rec);

HTH

Thorsten

[maceido]

Congratulations for the LiveGrid!!


I attach a code mainly taken from Ext.ux.grid.livegrid.Toolbar toolbar.

You init the object like this:

var wid = new Ext.ux.grid.livegrid.ViewStateWidgets(grid, config);

e.g.:
var wid = new Ext.ux.grid.livegrid.ViewStateWidgets(grid, {
   displayMsg : 'Showing {0} - {1} of {2}',
   emptyMsg : 'No data',
});

an now, you have two components (wid.displayInfoLabel and wid.refreshButton)
that you can put anywhere you like (not only in the toolbar)

e.g.:

wid.displayInfoLabel.render('my_div1');
wid.refreshButton.render('my_div2');

David

[ThorstenSuckow]

Congratulations for the LiveGrid!!


I attach a code mainly taken from Ext.ux.grid.livegrid.Toolbar toolbar.

You init the object like this:

var wid = new Ext.ux.grid.livegrid.ViewStateWidgets(grid, config);

e.g.:
var wid = new Ext.ux.grid.livegrid.ViewStateWidgets(grid, {
   displayMsg : 'Showing {0} - {1} of {2}',
   emptyMsg : 'No data',
});

an now, you have two components (wid.displayInfoLabel and wid.refreshButton)
that you can put anywhere you like (not only in the toolbar)

e.g.:

wid.displayInfoLabel.render('my_div1');
wid.refreshButton.render('my_div2');

David

Hi maceido,

sweet, that looks useful... however - do you have any sources online so we can try it ourself?

[tenthcup]

Will you fix the scrolling issue for IE6.0 in next release?

[maceido]

Hi maceido,

sweet, that looks useful... however - do you have any sources online so we can try it ourself?

Nothing online yet.

However I send you your demo at: http://www.siteartwork.de/livegrid_demo/
modified accordingly.
(just put the two files in the same directory, where you currently have data-proxy.php)


Regards,
David

ps: I just saw that in my previous post, the webserver rejected my file.
i have attached them now, adding a .txt extension. remember to remove it.

[ThorstenSuckow]

Hi there,

Ext.ux.Livegrid 0.3a4 is now available from the trunk.

I decided to put the Editor-support into the 0.3 branch as this seems an important feature to many of you. So, 0.3a4 will give you basic editor support, if you use Ext.ux.grid.livegrid.EditorGridPanel. Please test with your varios configurations and tell me if any problem occurs.

Also, passing the "view" as a config property to the Ext.ux.grid.livegrid.Toolbar now works again, as so many people have requested it.

Changelog available on the first page.

Happy coding, and have a nice weekend!

[ub3rn00b]

Many thanks, just checked the repo and got this

Seems I have a new rendering issue with my grids not displaying correctly in a tab, will play with it a bit more first

[ub3rn00b]

right been poking this with a stick, I am assuming this is something to do with my height setup, and I may be missing something entirely here, forgive me is a monday and I have not had enough coffee yet

var grid_billingExport_<?= $BillingTableRow[0]?> = new Ext.ux.grid.livegrid.GridPanel({
		ds             : bufferedDataStore_billingExport_<?= $BillingTableRow[0]?>,
		enableDragDrop : false,
		cm             : colModel,
		//autoHeight 	   : true,
		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]?>,
		/*autoLoad			 : false,*/
		tbar					 : [
			{text: 'Quicksearch:'	},
			searchBox_<?= $BillingTableRow[0]?>_txt
		,{
			xtype:'button',
			text: 'Search',
			handler: function(){
				if(searchBox_<?= $BillingTableRow[0]?>_txt.getValue().length==0){
		 			bufferedDataStore_billingExport_<?= $BillingTableRow[0]?>.load();
		 		}
		 		else{
					var filterValue = searchBox_<?= $BillingTableRow[0]?>_txt.getValue().replace(/^\s+|\s+$/g, "");
					if (filterValue==""){
						return;
					}
					bufferedDataStore_billingExport_<?= $BillingTableRow[0]?>.load({params:{'sortfield': filterValue}});
				}
			}
		}
		,{
			xtype:'button',
			text:'X',
			handler: function(){
				if (searchBox_<?= $BillingTableRow[0]?>_txt.getValue().length!=0) {
						searchBox_<?= $BillingTableRow[0]?>_txt.setValue('');	
						bufferedDataStore_billingExport_<?= $BillingTableRow[0]?>.load();
				}
			}
		}
		<? if(isset($_SESSION['_userTypeID']) && $_SESSION['_userTypeID'] == 6 || isset($_SESSION['_userTypeID']) && $_SESSION['_userTypeID'] == 5 || isset($_SESSION['_userTypeID']) && $_SESSION['_userTypeID'] == 1){?>		
		,
		'-',
		{
			xtype:'button',
			text:'Batch',
			disabled: <?= (IsProcessedMonth($BillingTableRow[0]) === TRUE)?'false':'true';?>,
			id: 'btn_<?= $BillingTableRow[0]?>_batch',
			handler: function (){
				_ExecuteBatchRun('<?= $BillingTableRow[0]?>');
			}
		},
		'-',
		{
			xtype:'button',
			text:'Export to Excel',
			handler: function(){
				_ExportBillingData('<?= $BillingTableRow[0]?>');
			}
		}
		<? } ?>
		]

	});

Now what is happening is if the autoHeight property is not set, it renders the grids headers at the bottom of the grid area, if I set it to true I have it rendering 3 rows and no scroll bars, also if i refresh, it removes the grid entirely. If I manually specify a height I have the same results as autoHeight = false;

Have attached screenshots, pointers welcome

The first is rendering on the old version of the grid, where we have the truncation error. The second is where I am not using the autoHeight property as seen above, and the final one is with the autoHeight property set to true

[nctag]

I've tested the current version 0.3a4 from trunk and I have to report a heavy error. I think it is the behavoir already posted by ub3rn00b. I tried to describe the error properly. (see attachement). Unfortunantely this version can not be used with that huge bug. Have a nice .