PDA

View Full Version : Ext.ux.LiveGrid



Pages : 1 2 3 [4]

simplessus
20 May 2010, 6:55 AM
Related to : Out of sync headers and rows when large number of columns displayed in Livegrid.


I can confirm this, I also have it. I am using ExtJS 3.2.

wm003
20 May 2010, 10:49 PM
Me too, although it's a bit different, the whole grid gets wider calculated making the horizontal scrollbar bigger as it should be.
As said, it only happens on large grids with many columns which need a horizontal scrollbar, scrolling to the right, and clicking in some cell on the right columns

pclovec
24 May 2010, 8:34 AM
There have any event can auto refresh livegrid. the grid only show 1 record issuer doesn't fix. so i only try to refresh data(or refresh render) after load and render.

such as listeren afterload or afterrender event. but current i didn't found out , also store call back function is doesn't work.

Thanks

Bing Qiao
25 May 2010, 1:52 AM
Me too, although it's a bit different, the whole grid gets wider calculated making the horizontal scrollbar bigger as it should be.
As said, it only happens on large grids with many columns which need a horizontal scrollbar, scrolling to the right, and clicking in some cell on the right columns

I'm experiencing a similar problem with the v0.1 of Ext.ux.grid.BufferedGridView after upgrading to Ext3.

The cause to me seems to be the change made to setXY in Ext.

By setting xy[0] = 0 before this.focusEl.setXY(xy) in focusCell of BufferedGridView.js (or GridView.js?) could solve the problem, at least on the surface. This may have the same effect on GridView.js but to be honest I don't quite understand how those calculations on coordinates work so not sure if this is the right approach.

Just found the following thread.

http://www.extjs.com/forum/showthread.php?33332-2.1-Possible-bug-in-CSS-.x-grid3-focus-cause-horizontal-scroll-issue.

Replacing the c.scrollLeft with this.el.getX() seems to work too.

wm003
25 May 2010, 7:51 AM
Replacing the c.scrollLeft with this.el.getX() seems to work too.

:) :) :) You made my day! Thanks a lot!

plaak
1 Jun 2010, 3:48 PM
Has anyone implemented CellSelectionModel for Livegrid? I don't see any support for it in the code and I could really use it.

Thanks

dearsina
6 Jul 2010, 4:33 AM
Most browsers will not handle more than 1-2m records. Firefox will stop showing a scrollbar, IE7 will show the scroll bar, but will stop at approx 191k rows.

I really dislike criticising an open source effort like this, because the author has been so generous with his work; but I still consider this a big enough issue to merit a warning to fellow programmers that are thinking of implementing it on very large data sets. It has been raised as a ticket (http://wiki.ext-livegrid.com/ticket/3), but it seems the ticketing system has been overrun by spam, so I thought it wise to mention again here.

Perhaps we can combine this very useful idea with a paging toolbar?

emily
9 Jul 2010, 6:01 AM
Hi,

I think I have found an IE 8 bug. IE was throwing an error on line 1733 of livegrid-all-debug.js because this.scrollOffset was undefined. The code that was causing the error to be thrown was this:



if (hiddenRows == 0) {
this.scroller.setWidth(elWidth);
liveScrollerDom.style.display = 'none';
return;
} else {
this.scroller.setWidth(elWidth-this.scrollOffset);
liveScrollerDom.style.display = '';
}

setWidth was moaning that elWidth-this.scrollOffset was NaN, so I changed it to this in my copy:



if (hiddenRows == 0) {
this.scroller.setWidth(elWidth);
liveScrollerDom.style.display = 'none';
return;
} else {
if (this.scrollOffset) {
this.scroller.setWidth(elWidth-this.scrollOffset);
} else {
this.scroller.setWidth(elWidth);
}
liveScrollerDom.style.display = '';
}

Which made it work for me (probably not best workaround). Not sure which version of livegrid (it might be useful if the livegrid version is added to the head of the files), but one that works with extjs 3.2.1.

Em

sosy
24 Jul 2010, 1:13 AM
Wow! I like this, added to my favorites... first impression and thoughts => What is this! cool thnx

Dumbledore
28 Jul 2010, 10:41 PM
Hi,

i try the live grid with the Ext 3.3 beta release and it will not run. Does anyone run this without errors?

[EDIT]

The GridView in Ext3.3 is refactored so the overwriting in Livegrid must change.

Rename the renderUI function to afterRenderUI and also the superclass call inside. After that the livegrid should run.



afterRenderUI : function() // org: renderUI
{
var g = this.grid;
var dEnabled = g.enableDragDrop || g.enableDrag;

g.enableDragDrop = false;
g.enableDrag = false;

this._gridViewSuperclass.afterRenderUI.call(this); // org: this._gridViewSuperclass.renderUI.call(this);

var g = this.grid;

g.enableDragDrop = dEnabled;
g.enableDrag = dEnabled;

if(dEnabled){
this.dragZone = new Ext.ux.grid.livegrid.DragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}

if (this.loadMask) {
this._loadMaskAnchor = Ext.get(this.mainBody.dom.parentNode.parentNode);
Ext.apply(this.loadMask,{
msgCls : 'x-mask-loading'
});
this._loadMaskAnchor.mask(
this.loadMask.msg, this.loadMask.msgCls
);
var dom = this._loadMaskAnchor.dom;
var data = Ext.Element.data;
data(dom, 'mask').addClass('ext-ux-livegrid');
data(dom, 'mask').setDisplayed(false);
data(dom, 'maskMsg').setDisplayed(false);
}
},

weazil
30 Jul 2010, 5:48 AM
Has anyone implemented CellSelectionModel for Livegrid? I don't see any support for it in the code and I could really use it.

Thanks

on the gridpanel this was my way of doing it


listeners: {
cellclick:function(grid,row,column,event) {
var r = livegrid.getStore().getAt(row);
var fieldName = grid.getColumnModel().getDataIndex(column);
if(fieldName != 'name'){
opennewDialog(r.get('spo'),'index.php?action=view&pid='+r.get('pid')+'&nomenu=1',r.get('pid'))
}
if(r.get('status_change') == 'true' && fieldName == 'name'){ changestatus('Po id '+r.get('pid')+' - '+r.get('jobname'),'index.php?&id='+r.get('pid')+'&moduleid=44|status&nomenu=1&cat=1'); }
}
}
,selModel : new Ext.ux.grid.livegrid.RowSelectionModel()


unsure if its the right way to do it but it works like a charm :) not the expert, kinda fumbling thru it...

hallikpapa
11 Aug 2010, 12:55 PM
I am trying to use the livegrid with no plugins. Everything works fine on initial load, then I get this error when scrolling & a new query is sent:

"record is undefined"
http://localhost/js/extjs/ext-all-debug.js
Line 43895

This is that line in the code in the doRender method:


meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store);


None of the POST parameters are missing, and it returns formatted JSON data, which is rendered (partially sometimes)

I am using v3.2.1. I see this problem when I scroll more than a 1/3 of the way down in the grid and it starts buffering. I am also not applying any filters at this point, so it's just doing the standard query. I am also using the same SQL statement for both types, just one returns the records, the other returns the count, then I bundle them together as the json response like in the example, just starts happening when I scroll. When I do see the error and stop scrolling, the entire grid is not filled, just blank space in the bottom 1/2.

As a final note, I am noticing that the onLoad method only gets touched on the initial load. is that intended?

Any tips on what the problem may be?

<edit>
It appears it is only dropping 133 records in the store instead of the 300 I return (bufferSize is set to 300 as well). I will keep digging to see why

harel
24 Aug 2010, 9:26 AM
I have two live grids on a page. The first one seem to work fine.
The second one, however, has the following problem: If i select a cell for editing, then scroll down enough to trigger the buffer load, the selection will flip from the original selected row to the approximate equivalent on the newly scrolled area. The value in the editor will be of another row's cell.
The first working grid uses a CheckboxSelectionModel but the second problematic one is a standard live grid rowselectionmodel
has anyone sees something like this before? I don't hvae any more hairs to pull. :o(

Harel

harel
24 Aug 2010, 10:45 AM
I'll answer my own problem after spending the day with it - My second query was not paginating using the start and end parameters passed so although the grid was scrolling visually , the store was always holding the full data.
:)

nosferatum
21 Sep 2010, 10:50 PM
Ext.ux.LiveGrid works ok, but there is a problem for GridView.adjustScrollerPos - it does not work in IE and Opera. Obviously this is because of use
scrollDom.scrollTop += pixels; (GridView.js, line 1780)
_setting_ scrollTop property works in FF, but does not is IE and Opera. This is a known issue, and AFAIR, scrollTop is not W3C supported dom property.

Or may be there is the other way to save scroll position after store reloading? What I do is save lastScrollPos on beforerefresh and set it back on refresh using adjustScrollerPos(savedScrollTop, true). Works nice in FF (scrolled to top by onLoad, then back to savedScrollTop), but grid scroll stays on its top in other browsers.

urskipfer
22 Sep 2010, 1:15 AM
First I like livegrid very much. I have a small problem and could not find a solution. I just want to append some records to the grid. I do this with the insert function with the bufferSize as index. So far this seems to work fine. Now I would like that the last inserted record is shown. I didn't find any solution for that without a server roundtrip. Any ideas?

yura620310
22 Sep 2010, 3:11 AM
Ext.ux.LiveGrid works ok, but there is a problem for GridView.adjustScrollerPos - it does not work in IE and Opera. Obviously this is because of use
scrollDom.scrollTop += pixels; (GridView.js, line 1780)
_setting_ scrollTop property works in FF, but does not is IE and Opera. This is a known issue, and AFAIR, scrollTop is not W3C supported dom property.

Or may be there is the other way to save scroll position after store reloading? What I do is save lastScrollPos on beforerefresh and set it back on refresh using adjustScrollerPos(savedScrollTop, true). Works nice in FF (scrolled to top by onLoad, then back to savedScrollTop), but grid scroll stays on its top in other browsers.

I have same "save scroll position" problem.

nosferatum
22 Sep 2010, 11:54 PM
adjustScrollPosition does not work in Chrome too. Although Ext is VERY fast in Chrome.

nosferatum
29 Sep 2010, 5:33 AM
Extremely need Ext.ux.LiveGrid with column groups. I think it should be aggregate code of Ext.ux.LiveGrid and GroupHeaderGrid from this thread:
http://www.sencha.com/forum/showthread.php?76322-GroupHeaderGrid-Grouped-grid-column-headers/page5

nickelj
12 Oct 2010, 12:43 PM
K...I feel stupid....I can't get this to work. I have downloaded the livegrid sample, and put it in and modified the locations of the .css and .js files and all I get is a error in the browser:

Object Expected: Line 466, char 13 - livegrid-all-debug.js

No idea what the problem is. Does anyone have a nice working example or tutorial on how to use this thing?

Jim

nickelj
12 Oct 2010, 3:27 PM
K....I replaced my ext-base.js and ext-all-debug.js with the versions found here: http://www.ext-livegrid.com/ext/extjs/ext-3.1.0/ext-all-debug.js (http://www.ext-livegrid.com/ext/extjs/ext-3.1.0/ext-all-debug.js) and now it all works. Must be something different with the version of EXT JS I downloaded.

nickelj
12 Oct 2010, 10:46 PM
I tried the 3.2.1 versions and they also work....just the 3.3 version of EXT JS are broken for use with the livegrid.

Also...maybe this is really obvious to everyone else, but I had trouble figuring out what format the grid expected the data back in, so I thought I would post my PHP code to save someone else the trouble.

Here is the PHP MySQL code (for this example should be named data-proxy.php):



<?php
/**
* Basic PHP code to retrieve data in the format that the EXT JS Livegrid expects.
*
* Modified by Jim Nickel <jim@yournickelsworth.com>
* Original code was by Thorsten Suckow-Homberg <ts@siteartwork.de>
*
* Change the user, password and database as appropriate for your environment
*
*/

// +----------------------------------------------------------------------------
// | Connection settings. Adjust the following lines (see "livegrid.sql").
// +----------------------------------------------------------------------------
$host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$table = 'livegrid';

// +----------------------------------------------------------------------------
// | Query stuff. As long as everything works fine, you can ignore the following
// | lines. Scroll down to the part where the json encoding happens...
// +----------------------------------------------------------------------------
$conn = mysql_connect($host, $user, $password);
mysql_select_db($database, $conn);
$sql2 = "SELECT COUNT(id) AS count_id FROM $table";
$res2 = mysql_query($sql2);
$row2 = mysql_fetch_assoc($res2);
$length = $row2['count_id'];
$feeds = array();
$sql = "SELECT * FROM $table ORDER BY ".$_POST['sort']." ".$_POST['dir'].
" LIMIT ".$_POST['start'].",".$_POST['limit'];
$res = mysql_query($sql);
while (($row = mysql_fetch_assoc($res))) {
$feeds['data'][] = array(
'id' => $row['id'],
'number_field' => $row['number_field'],
'string_field' => $row['string_field'],
'date_field' => $row['date_field']
);
}
if (!isset($feeds['data'])) {
$feeds['data'] = array();
}
$feeds['version'] = 1;
$feeds['totalCount'] = $length;

// +----------------------------------------------------------------------------
// | You need to json_encode the array. If your PHP installation does not support
// | json_encode, go and get the Zend Framework at http://framework.zend.com,
// | which provides userland json encoding/decoding logic.
// +----------------------------------------------------------------------------
if (function_exists('json_encode')) {
$json = json_encode($feeds);
} else {
require_once 'Zend/Json.php';
$json = Zend_Json::encode($feeds);
}
echo $json;
?>


Here is the HTML (you need to modify the locations of the css and js files - also I found that it DID NOT WORK with 3.3 of EXT JS):



<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ext.ux.Livegrid &raquo; Simple Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../build/resources/css/ext-ux-livegrid.css" />
</head>
<body>
<div id="content_1" style="margin:100px"></div>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="livegrid-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var myView = new Ext.ux.grid.livegrid.GridView({
nearLimit : 100,
loadMask : {
msg : 'Buffering. Please wait...'
}
});
var livegrid = new Ext.ux.grid.livegrid.GridPanel({
enableDragDrop : false,
cm : new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header : '#', width: 60 }),
{header: "Number", align : 'left', width: 160, sortable: true, dataIndex: 'number_field'},
{header: "String", align : 'left', width: 160, sortable: true, dataIndex: 'string_field'},
{header: "Date", align : 'right', width: 160, sortable: true, dataIndex: 'date_field'}
]),
loadMask : {
msg : 'Loading...'
},
title : 'Large table',
height : 400,
stripeRows : true,
width : 600,
store : new Ext.ux.grid.livegrid.Store({
autoLoad : true,
url : 'data-proxy.php',
bufferSize : 300,
reader : new Ext.ux.grid.livegrid.JsonReader({
root : 'data',
versionProperty : 'version',
totalProperty : 'totalCount',
id : 'id'
}, [ {
name : 'number_field', sortType : 'int'
},{
name : 'string_field', sortType : 'string'
},{
name : 'date_field', sortType : 'int'
}]),
sortInfo : {field: 'number_field', direction: 'ASC'}
}),
selModel : new Ext.ux.grid.livegrid.RowSelectionModel(),
view : myView,
bbar : new Ext.ux.grid.livegrid.Toolbar({
view : myView,
displayInfo : true
})
});
livegrid.render('content_1');
});
</script>
</body>
</html>


Then, you just need to create a MySQL table called livegrid that has this structure:



CREATE TABLE IF NOT EXISTS `livegrid` (
`id` int(10) unsigned NOT NULL auto_increment,
`number_field` int(10) unsigned NOT NULL,
`string_field` varchar(255) NOT NULL,
`date_field` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5001 ;


Then fill it with some data:



INSERT INTO `livegrid` (`id`, `number_field`, `string_field`, `date_field`) VALUES
(1, 0, 'A', '1972-05-20 22:49:03'),
(2, 1, 'B', '2007-07-29 00:01:55'),
(3, 2, 'C', '1971-07-01 00:46:13'),
(4, 3, 'D', '1978-01-15 12:07:04'),
(5, 4, 'E', '1976-04-12 21:11:17'),
(6, 5, 'F', '1970-10-27 04:16:47'),
(7, 6, 'G', '1999-08-10 12:03:48'),
(8, 7, 'H', '1987-07-16 03:48:15'),
(9, 8, 'I', '1991-08-21 17:42:46');


And you should be good to go!

Jim

nickelj
14 Oct 2010, 1:18 PM
Has anyone gotten this to work with either the FilterRow or the GridHeaderFilters?

Basically a search/filter that is in the columns or headers of the grid itself.

Any help would be appreciated!

Jim

dp814082
14 Oct 2010, 7:14 PM
THX for your sharing!

daddie888
21 Oct 2010, 1:02 AM
I got livegrid to work with 3.3 and Filterrow wit 3.3 also but still need to combine the two
http://www.sencha.com/forum/showthread.php?55730-Editors-in-Grid-Header-for-Filter-or-New-Data/page7&highlight=Ext.ux.grid.FilterRow
http://www.sencha.com/forum/showthread.php?112629-ExtJS-3.3-and-LiveGrid&p=527637#post527637

Peter

marcoas
21 Oct 2010, 10:55 AM
there is possible have left column blocked, like Excel?

wifi4psp
4 Nov 2010, 1:45 AM
Hi, I am trying to use live-grid to present data with 5000 rows and 100 cols.
My project is using EXT JS 2.0.2.

When I set the store's buffer size as 300, the live-grid works pretty well.
However, when I set it as 5000, the page is about to hang.
I wonder if the page is trying to render all the 5000 rows at the beginning..
since when I tried to scroll down, there was no "Loading/ Buffering" message prompted.

As I dun want the grid keeps connecting to the database,
is it possible to load all data once to the Ext.ux.grid.livegrid.Store,
and then make the grid to render and show only those data within the grid's viewable area?

I tried to change the BufferSize property in GridPanel/ GridView and also the Store's one, but didn't work.
Could anyone helps?
Thanks a lot.

karlsnyder0
22 Nov 2010, 11:35 AM
There's been many different versions of a LiveGrid patch but none of them worked for me. It was a headache tracing this down through the stack. I went back to the previous version of ExtJs (3.2) and 3.3, compared the two and realized that LiveGrid is broken because in (Ext.grid.GridView) renderUI has changed (there's afterRenderUI now). renderUI now returns the HTML for GridView and afterRenderUI builds the DOM. After the patch below I haven't found anything else that is broken in LiveGrid (yet!).

Add this override code to your base JS object (or stuff the code between a script tag after loading the extjs and livegrid library files):


Ext.override(Ext.ux.grid.livegrid.GridView, {
afterRenderUI : function()
{
var g = this.grid;
var dEnabled = g.enableDragDrop || g.enableDrag;

g.enableDragDrop = false;
g.enableDrag = false;

this._gridViewSuperclass.afterRenderUI.call(this);

var g = this.grid;

g.enableDragDrop = dEnabled;
g.enableDrag = dEnabled;

if(dEnabled){
this.dragZone = new Ext.ux.grid.livegrid.DragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}

if (this.loadMask) {
this._loadMaskAnchor = Ext.get(this.mainBody.dom.parentNode.parentNode);
Ext.apply(this.loadMask,{
msgCls : 'x-mask-loading'
});
this._loadMaskAnchor.mask(
this.loadMask.msg, this.loadMask.msgCls
);
var dom = this._loadMaskAnchor.dom;
var data = Ext.Element.data;
data(dom, 'mask').addClass('ext-ux-livegrid');
data(dom, 'mask').setDisplayed(false);
data(dom, 'maskMsg').setDisplayed(false);
}
},
renderUI : function()
{
return this._gridViewSuperclass.renderUI.call(this);
}
});

I hope this works for you.

jmariani
23 Nov 2010, 12:57 PM
Works!
Thank you KarlSnyder0

pibree
6 Dec 2010, 4:02 AM
I use a live grid.
Now I would that the grid load not from start = 0 but from start = 100 so I have setted this in my option's store:


store.load({params:start:100 ..... }..... );

But I get that the store starts always from 0.
What must I do to have that the store load 100 and not from 0?
Many Thanks

pibree
6 Dec 2010, 9:28 AM
Have someone any suggestion?

ixvivxi
14 Dec 2010, 3:01 AM
Using the code found in this thread, I managed to get the LiveGrid to work on Ext JS 3.3.1. It appears to work well as a replacement for the standard grid, but operating multiple grids in parallel from a single LiveGrid store requires additional event handling. Is there any source available which enables operating multiple LiveGrids from the same store in parallel?

nosferatum
30 Dec 2010, 1:27 AM
Having problem when trying to create LiveGrid with multiline toolbars.
I do something like setting Ext.ux.grid.livegrid.GridPanel's toolbar to 2 toolbars:

bbar: new Ext.Panel({
items:
[
{ // additional toolbar
xtype: 'toolbar',
items:
[
new Ext.Button({ text: 'My text'})
]
},
new Ext.ux.grid.livegrid.Toolbar({ view: gridView, displayInfo: true }) // liveGrid's standard toolbar
]
})

This code fails on livegrid-all-debug.js, line 3326 with error 'this.loading is undefined',
in setting listeners for toolbar:

disableLoading : function()
{
this.loading.setDisabled(true); // here this.loading is undefined
},

Debugging says that, while 'this' points to Ext.ux.grid.livegrid.Toolbar, this.loading (which is refresh button actually) was still not created. It is created in onRender of Ext.ux.grid.livegrid.Toolbar (livegrid-all-debug.js, line 3382) , but this code is not called.
So, the listener is called without rendering the Ext.ux.grid.livegrid.Toolbar.

Most likely, the problem is that bbar of LiveGrid is now Ext.Panel with an array of toolbars instead of the only Ext.ux.grid.livegrid.Toolbar object. Probably, render is called for this array and not for Ext.ux.grid.livegrid.Toolbar.
I'd suppose this this to be fixed so that Ext.ux.grid.livegrid.Toolbar would be looked through all items of bbar property, if it is a panel with an array of toolbars.

su-aska
5 Jan 2011, 2:10 AM
Ext.ux.grid.livegrid.GridView override Ext.grid.GridView's initElements but no support hideHeaders.



initElements : function()
{
var E = Ext.Element;

var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;

this.el = new E(el);

this.mainWrap = new E(cs[1]);

// liveScroller and liveScrollerInsets
this.liveScroller = new E(cs[0]);
var f = this.liveScroller.dom.firstChild;
this.liveScrollerInsets = [
f,
f.nextSibling,
f.nextSibling.nextSibling
];
this.liveScroller.on('scroll', this.onLiveScroll, this, {buffer : this.scrollDelay});

var thd = this.mainWrap.dom.firstChild;
this.mainHd = new E(thd);

// support hideHeaders begin
if (this.grid.hideHeaders) {
this.mainHd.setDisplayed(false);
}
// support hideHeaders end
// ...

ThorstenSuckow
6 Feb 2011, 12:32 PM
Ext.ux.Livegrid 0.5 has just been released which brings compatibility for ExtJS' 3.3 branch. You can download it here: http://www.ext-livegrid.com/download/

tobiu
9 Feb 2011, 6:07 AM
WB Thorsten, good job!


Best regards
Tobias

ThorstenSuckow
9 Feb 2011, 12:53 PM
Those release candidates introduce minor bugfixes and the CheckboxSelectionModel for both ExtJS 3.3 and ExtJS 3.1+. More release notes on the first page of this thread. As usual, you can download the files here http://www.ext-livegrid.com/download/

jenner
9 Feb 2011, 1:01 PM
Ext.ux.Livegrid 0.5 has just been released which brings compatibility for ExtJS' 3.3 branch.[/url]

Awesome news, thank you so much for your work, I really appreciate it.

wm003
9 Feb 2011, 11:20 PM
Thorsten, could you please implement the little fix for the horzontal scrolling issue from here (http://www.extjs.com/forum/showthread.php?33332-2.1-Possible-bug-in-CSS-.x-grid3-focus-cause-horizontal-scroll-issue.&p=207956#post207956) into your 0.5x branch? :)

It's just a little fix at the end of method "ensureVisible" (just remove the c.scrollLeft addition) and works great.


return cellEl ?
Ext.fly(cellEl).getXY() :
[/*c.scrollLeft+*/this.el.getX(), Ext.fly(rowEl).getY()];

ThorstenSuckow
10 Feb 2011, 1:53 AM
Thanks, I'll have a look at it. Once RCs gets stable I'll let you know what makes it into the next release.

theo
22 Feb 2011, 3:04 AM
Hi MindPatterns,

I've got some troubles with the last version of Livegrid (0.5) and dragondrop in Extjs 3.3.1.

Error:
this.view.mainBody is undefined


+ GridDragZone(grid=Object { initialConfig={...}, title="Devices", more...}, config=Object { ddGroup="devicesBasket"})all-de...1155496 (ligne 48828)grid = Object { initialConfig={...}, title="Devices", more...}
config = Object { ddGroup="devicesBasket"}

+ DragZone(grid=Object { initialConfig={...}, title="Devices", more...}, config=Object { ddGroup="devicesBasket"})grid.l...8372267 (ligne 3678)grid = Object { initialConfig={...}, title="Devices", more...}
config = Object { ddGroup="devicesBasket"}

+ renderUI()grid.l...8372267 (ligne 462)
+ render()


Could you help me please to fix the problem ? Seems that the function renderUI fails with last extjs version.

Thanks,

karlsnyder0
28 Feb 2011, 9:47 AM
In the CheckboxSelectionModel the version for LiveGrid 3.3 RC1 doesn't work. The model won't allow multiple checkboxes to be checked without holding down the Ctrl Key.

What I found was that the event handling was changed drastically from ExtJS 3.1 to ExtJS 3.3. The Ext.ux.grid.livegrid.CheckboxSelectionModel doesn't follow how the ExtJS 3.3 Ext.grid.CheckboxSelectionModel is implemented.

BTW, we have purchased a license for your extension and we love it! It would be a big plus if I could get this feature to work.

SebTardif
2 Mar 2011, 3:08 PM
LiveGrid has no features list.

Anyone know what work and doesn't compared to the official Ext JS Grid?

Hopefully, Ext JS 4 will be so faster that we will be able to write enterprise application without hacking our application with LiveGrid experiment.

mohan_b
2 Mar 2011, 9:07 PM
Hi MindPatterns,

I've got some troubles with the last version of Livegrid (0.5) and dragondrop in Extjs 3.3.1.

Error:
this.view.mainBody is undefined


+ GridDragZone(grid=Object { initialConfig={...}, title="Devices", more...}, config=Object { ddGroup="devicesBasket"})all-de...1155496 (ligne 48828)grid = Object { initialConfig={...}, title="Devices", more...}
config = Object { ddGroup="devicesBasket"}

+ DragZone(grid=Object { initialConfig={...}, title="Devices", more...}, config=Object { ddGroup="devicesBasket"})grid.l...8372267 (ligne 3678)grid = Object { initialConfig={...}, title="Devices", more...}
config = Object { ddGroup="devicesBasket"}

+ renderUI()grid.l...8372267 (ligne 462)
+ render()


Could you help me please to fix the problem ? Seems that the function renderUI fails with last extjs version.

Thanks,

I was boggled by the same bug, I managed to do the following

AfterRenderUI was usually named as something that would fix for issues surrounding render

So I removed the initialization of the livegrid Dragzone from RenderUI to AfterRenderUI (note that it uses some local variables also, please copy those necessary)

This fixed my issues,

All the best

Mohan B

danceric
23 Mar 2011, 5:26 PM
I have a Livegrid CheckboxSelectionModel and there's a Listeners in this CheckboxSelectionModel
to handle rowselect event.

But somehow, this event doesn't be fired after any row that have been selected.



this.SelectModel = new Ext.ux.grid.livegrid.CheckboxSelectionModel({
checkOnly: false,
listeners : {
scope : this,
rowselect : function(sm, rowIndex, record) {
alert('rowselect');
},
selectionchange : function(sm, rowIndex, record) {
alert('selectionchange');
}
}
});

drian
25 Jun 2011, 9:57 AM
In the CheckboxSelectionModel the version for LiveGrid 3.3 RC1 doesn't work. The model won't allow multiple checkboxes to be checked without holding down the Ctrl Key.

What I found was that the event handling was changed drastically from ExtJS 3.1 to ExtJS 3.3. The Ext.ux.grid.livegrid.CheckboxSelectionModel doesn't follow how the ExtJS 3.3 Ext.grid.CheckboxSelectionModel is implemented.

BTW, we have purchased a license for your extension and we love it! It would be a big plus if I could get this feature to work.

Here's some quick code that will do the following:
- select/deselect a row when clicking on it
- keep the previous rows selected

Add a listener to the live grid:


rowmousedown : function(grid, rowIndex, e){
var sm = grid.getSelectionModel();
if(sm.isSelected(rowIndex)){
sm.deselectRow(rowIndex, false);
return false;
}
}


Go inside the livegrid code and modify the selectRow function (line 2386 in livegrid-all-debug.js) and add keepExisting = true; as the first line of code.

nosferatum
9 Aug 2011, 11:32 PM
setting checkOnly for CheckboxBoxSelectionModel does not work, so it's unable to set checking only by clicking on checkbox column. Looking to sources it appears that 'checkOnly' option is not handled anyhow. I suppose the behaviour should be copied from standard Ext.grid.CheckboxSelectionModel:




constructor : function(){
Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments);

if(this.checkOnly){
this.handleMouseDown = Ext.emptyFn;
}
},

nosferatum
11 Aug 2011, 11:07 PM
When livegrid's CheckboxSelectionModel is added to the grid with headers grouped by Ext's standard plugin Ext.ux.grid.ColumnHeaderGroup, the following problem appears (see the attached image):
1) The second nothing-doing checkbox appears in the top row of the column header (the row which contains column group headers).
2) Clicking "check all" checkbox checks only loaded part of rows (f.e. 200 rows). When scrolling from this part of rows, other rows remain unchecked while header checkbox is indicated as checked. If "check all" is checked on other part of rows, the previously checked rows uncheck.

In grids with no ColumnHeaderGroup, behaviour is correct.

Notice I'm using ext 3.2, so rowspanned column headers are not possible.

brookd
25 Sep 2011, 1:19 PM
This download link "http://www.ext-livegrid.com/download/" is broken. Where can I download the latest version? Does anyone have the rowSelectionModel working with Ext 3.4.0?

DTSman
30 Jan 2012, 12:42 AM
Hello,

The livegrid does not allow to select a specific cell. Each time the user select a cell, the entire row is selected.

Is it possible to select a cell with the mouse, then, navigate with the cursor arrow?

Thanks for your help.

nosferatum
4 Oct 2012, 5:17 AM
Are you going to support Ext.ux.LiveGrid for ExtJS 4?
Regardless of that Ext included it's own implementation of LiveGrid in standard plugins, it's much more simple and unneat comparing to your nice plugin.
I'd really appreciate Ext 4 realization.

sango
16 Oct 2012, 5:13 AM
I have a datagrid using the plugin Ext.ux.Livegrid. We asked me to use paging for datagrid. The purpose of this plugin was to connect to a database backend and renders large sets of data into a grid, without the need of paging. But for my project, i need paging. How can we activate paging with your plugin.
Anyone can explain me what to modify in the source code or to add ? Off course, it' a paging horizontal.

wm003
21 Oct 2012, 9:56 PM
If you need paging then don't use the livegrid but the ext internal grid which already supports paging.

ThorstenSuckow
27 Oct 2012, 5:03 AM
Ext.ux.Livegrid 0.6 is available now which supports ExtJS 3.4.

You can find the release here : http://ext-livegrid.com/download

ThorstenSuckow
28 Oct 2012, 3:04 PM
Ext.ux.Livegrid 0.6.1 was just released which fixes an issue with the store's sortData() method. Download is available at http://ext-livegrid.com/download. Cheers!

wm003
28 Oct 2012, 11:02 PM
Thanks Thorsten, could you please implement that horizontal scrollbar fix which was mentioned here (http://www.extjs.com/forum/showthread.php?33332-2.1-Possible-bug-in-CSS-.x-grid3-focus-cause-horizontal-scroll-issue.&p=207956#post207956) ((c.scrollLeft must be deleted)and works up to 0.5). In 0.61 this "bug" seems to be in again.

ThorstenSuckow
29 Oct 2012, 12:31 AM
Thanks for the hint, I'm trying to reproduce this one later on.

ttbgwt
29 Oct 2012, 10:11 AM
I used paramNames on my store but they don't seem to be working in the live grid store?

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.Store-cfg-paramNames



paramNames: {
start: 'skip',
limit: 'limit',
sort: 'sort',
dir: 'dir'
}

ThorstenSuckow
30 Oct 2012, 2:08 AM
Thanks, I'll look into it.

ttbgwt
14 Nov 2012, 11:11 AM
Hi Thorsten,

Any updates on the paramNames support?

Thanks

DmitrySistor
28 Nov 2012, 10:38 PM
How to reload data and keep current row position?

ThorstenSuckow
6 Dec 2012, 4:44 PM
Hey there, Ext.ux.Livegrid 0.7 is available and introduces support for the paramNames configuration option.
Additionally, the store has an event now that gets fired when the "findInsertIndex()" has found a possible index the record should get inserted at: listeners can change the proposed value to their likes.
This release contains also a bug fix where inserting records to the data store would result in a mismatched rendering of grid rows in some cases.

Release available as always from http://www.ext-livegrid.com/download/

Cheers, Thorsten

ThorstenSuckow
8 Dec 2012, 6:04 PM
Ext.ux.Livegrid 0.7.1 is available. This is a bug fix release which fixes an issue where references to selected records would get lost after reloading or sorting the store.

You can download the release here: http://www.ext-livegrid.com/download/

ttbgwt
11 Dec 2012, 1:08 PM
Cool. I just bought a commercial license from your site :)

ttbgwt
11 Dec 2012, 1:39 PM
How can I use a ext.data.DirectProxy with your livegrid?

Neethi
13 Dec 2012, 3:28 AM
Hi Thorsten,

I'm trying to implement locking column for livegrid.
I've written plugin that will create a template with locked column. But I've problem here, I've locked first column, before store loads locked live gird looks fine. But after data loads its messing up. The rows that needs to come in locked column except first row are going into normal grid besides after the data.

And also in Live grid I've found an issue if I've too many columns and I scroll to right to see next columns.. but after scrolling to right and click on any column to sort , then headers and row lines are distracted. And that will set right when i move the scroll bar a little.
please suggest a solution.

Thanks
Neethi

wm003
13 Dec 2012, 11:03 PM
And also in Live grid I've found an issue if I've too many columns and I scroll to right to see next columns.. but after scrolling to right and click on any column to sort , then headers and row lines are distracted. And that will set right when i move the scroll bar a little.
please suggest a solution.


Please take a look at my post #806 or here (http://www.extjs.com/forum/showthread.php?33332-2.1-Possible-bug-in-CSS-.x-grid3-focus-cause-horizontal-scroll-issue.&p=207956#post207956)
it is solved by removing "c.scrollleft+" in method "ensureVisible".

livegrid v0.7.1 still has this implemented you need to slightly modify the livegrid code yourself.

Neethi
18 Dec 2012, 3:16 AM
Hi wm03,

After removing "c.scrollleft+" in method "ensureVisible" at return statement, the lines are now more distracted on scroll right by default and after sorting last columns the lines are fixing correctly. Is there anything else I need to do?

ttbgwt
3 Jan 2013, 10:46 AM
How can I use a ext.data.DirectProxy with your livegrid?

Any update on this? Thanks

wm003
8 Jan 2013, 7:27 AM
I am using LiveGrid together with gridfilters. It all works well but when any filter is activated the column header text gets automatically bold and italic.
This still works, but after reloading the grid (because it was triggered by the filter) the "reset" method from livegrid is called. This calls the "refresh"-method from the GridView with "true" to also refresh the Grid-Column Headers. And this will finally remove the css style. So you need to change one codeline in

Ext.ux.grid.livegrid.GridView.reset


...
var _ofn = this.processRows;
this.processRows = Ext.emptyFn;
this.suspendEvents();
// this.refresh(true);
this.refresh(false);
this.resumeEvents();
this.processRows = _ofn;
this.processRows(0);
...

Ballsacian1
17 Feb 2013, 8:23 AM
Ext.grid.livegrid.CheckboxSelectionModel mouse and keyboard events called twice

How to Reproduce:
Load the Checkbox demo in the livegrid source and either click on a row or try moving up and down rows with the arrow keys. Moving up and down results in skipping a record each time and clicking with the mouse only allows certain actions to take place because mousedown and keyup are being called twice each time.

Problem:
Red text represents the problem and green text represents the added code to solve it.

Line 68 of Ext.grid.livegrid.CheckboxSelectionModel.js

initEvents : function()
{
this.skipParentInitEvents = true;
Ext.ux.grid.livegrid.CheckboxSelectionModel.superclass.initEvents.call(this);


this.grid.view.on('reset', function(gridView, forceReload) {
this.headerCheckbox = new Ext.Element(
gridView.getHeaderCell(this.grid.getColumnModel().getIndexById(this.id)).firstChild
);
if (this.markAll && forceReload === false) {
this.headerCheckbox.addClass('x-grid3-hd-checker-on');
}
}, this);


Ext.grid.CheckboxSelectionModel.prototype.initEvents.call(this);
},

and line 64 of Ext.grid.livegrid.RowSelectionModel.js

initEvents : function()
{
if(!this.skipParentInitEvents){
Ext.ux.grid.livegrid.RowSelectionModel.superclass.initEvents.call(this);
}


var grid = this.grid,
view = grid.view,
store = grid.store;


view.on('rowsinserted', this.onAdd, this);
store.on('selectionsload', this.onSelectionsLoad, this);
store.on('load', this.onStoreLoad, this);
},


Because of these three superclass calls the Ext.ux.grid.livegrid.RowSelectionModel.superclass gets called twice resulting in Ext.grid.RowSelectionModel.initEvents being called twice and the mousedown and keyup events being doubled.

Solution:
By adding a flag for skipping the superclass initEvents, the CheckboxSelectionModel can still call both superclasses without worry of the double event hooks.

ttbgwt
20 Feb 2013, 1:47 PM
Can you add a column locking feature to your live grid, or at least point me in the right direction to get something working? I purchased a developers license a few months ago.

Thanks!

psm1963
6 Mar 2013, 3:33 PM
I've upgraded to 3.4 and have seen some strange behavior of live grid but only on IE....sometimes only ten rows populate in a grid and there is empty space where it should have added more visible row...any ideas...works fine in FF and Chrome

wm003
7 Mar 2013, 12:41 AM
I've upgraded to 3.4 and have seen some strange behavior of live grid but only on IE....sometimes only ten rows populate in a grid and there is empty space where it should have added more visible row...any ideas...works fine in FF and Chrome
i had something similar and fixed it as follows:


liveBufferUpdateFirstTime:true,
// private
liveBufferUpdate : function(records, options, success)
{
if (success === true) {
this.adjustBufferInset();

this.fireEvent('buffer', this, this.ds, this.rowIndex,
Math.min(this.ds.totalLength, this.visibleRows-this.rowClipped),
this.ds.totalLength,
options
);

// this is needed since references to records which have been unloaded
// get lost when the store gets loaded with new data.
// from the store
this.grid.selModel.replaceSelections(records);

this.isBuffering = false;
this.isPrebuffering = false;
this.showLoadMask(false);

if (this.requestQueue >= 0) {
var offset = this.requestQueue;
this.requestQueue = -1;
this.updateLiveRows(offset);
return;
}

if (this.isInRange(this.rowIndex)) {
this.replaceLiveRows(this.rowIndex, options.forceRepaint);
} else {
this.updateLiveRows(this.rowIndex);
}
if (this.liveBufferUpdateFirstTime) {
this.liveBufferUpdateFirstTime=false;
this.layout();
}
return;
} else {
this.fireEvent('bufferfailure', this, this.ds, options);
}

this.requestQueue = -1;
this.isBuffering = false;
this.isPrebuffering = false;
this.showLoadMask(false);

DmitrySistor
4 Jul 2013, 3:58 AM
how to move the cursor to a specific record. for example, to move to the added record, knowing her number.

wm003
1 Aug 2013, 5:51 AM
I've upgraded to 3.4 and have seen some strange behavior of live grid but only on IE....sometimes only ten rows populate in a grid and there is empty space where it should have added more visible row...any ideas...works fine in FF and Chrome

i seem to finally found that nasty bug. I happened when the livegrid tries to redraw the rows while its store is being loaded. Resulting in empty row-list which was used in Ext.fla resulting in a js error

My fix:


processRows : function(startRow, skipStripe, paintSelections)
...
if(rows.length>0){
// add first/last-row classes
if(cursor === 0){
Ext.fly(rows[0]).addClass(this.firstRowCls);
} else if (cursor + rows.length == this.ds.totalLength) {
Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
}
}
},

ThorstenSuckow
13 Nov 2013, 4:03 PM
Hey there,

I have just released Ext.ux.Livegrid 0.8. This is a feature release which brings support for "stateful" livegrid components, i.e. restoring scroll position and selections of the recently loaded dataset.

As always, you can find the release over at the project's home page, http://www.ext-livegrid.com

nosferatum
14 Nov 2013, 12:45 AM
Thorsten, does your Ext.ux.Livegrid 0.8 work with Ext 4?

ThorstenSuckow
14 Nov 2013, 12:56 AM
Unfortunately, no support for ExtJS 4 yet. I have heard that ExtJS4 has a similiar implementation, but haven't worked with it yet, since in the projects I'm involved in do not use them. Have you made any experiences with it so far?

nosferatum
14 Nov 2013, 2:25 AM
Well, actually ExtJs 4 has a built-in livegrid implementation, but it's completely ugly and weakly functional comparing to your nice Ext.ux.LiveGrid. It'd be awesome if you modified your LiveGrid for working under ExtJS 4.

ThorstenSuckow
14 Nov 2013, 2:48 AM
I see. There is another release of conjoon scheduled for the next month. After this I will look into migrating the software to ExtJS 4. And when I do this, I will also migrate livegrid, since conjoon heavily depends upon it. Can't tell you when it will be done since other things are keeping me busy, but I will definitely let you know.

ThorstenSuckow
13 Apr 2014, 8:48 AM
I have just released Ext.ux.Livegrid 0.8.1. This is a bugfix release. More info here: http://www.ext-livegrid.com/2014/04/13/ext-ux-livegrid-0-8-1-available/

Cheers!