PDA

View Full Version : Ext.ux.LiveGrid



Pages : 1 [2] 3 4

daeghran
21 Aug 2008, 3:09 AM
Hi,

When trying to get a copy of this extension at the official project homepage (http://www.siteartwork.de/livegrid (http://www.siteartwork.de/livegrid)) I just get a placeholder page saying its unavailable.

Does anyone know where I can get a copy:-/

cain06
21 Aug 2008, 10:09 AM
You will need an SVN client - you can download off Google code here

http://code.google.com/p/ext-ux-livegrid/source/checkout

daeghran
21 Aug 2008, 2:52 PM
You will need an SVN client - you can download off Google code here

http://code.google.com/p/ext-ux-livegrid/source/checkout

Thanks cain06, just what I needed.

nctag
22 Aug 2008, 1:39 AM
I fixed the attached file. Now it is possible to work with Ext 2.2 and livegrid.
Just replace the attached file with that one in your ext/ux/ directory and rename the file (remove .txt at the end that was nessessary to upload here).

ThorstenSuckow
24 Aug 2008, 5:33 PM
I just fixed several bugs and tagged the V0.1.2 release. You'd be better off getting the source from the trunk, as I fixed another bug depending the selection model (google issue 5).
Changelog is on the first page.

Ext2.2 support is scheduled for V0.2.

Thanks all you guys for your feedback and bug reports so far! ~o)

nctag
25 Aug 2008, 12:41 AM
@MindPatterns
we are very pleased that you are still working on it. It's really a great extension. We'll then be waiting for v.0.2. If you want to use our fix for the scrolling issue. you have to search in the file for "fixed by nctag".
Thank you.

Canard64
25 Aug 2008, 12:58 AM
Where i can download the librairie ext.us

sstratton
27 Aug 2008, 5:54 AM
reference to undefined property D[C]
options.params.start,
BufferedStore.js (line 439)
reference to undefined property options.params
options.params.start,
BufferedStore.js (line 439)
options.params is undefined
options.params.start

having this issue when I'm loading the grid, however, wasn't having this issue before I moved the grid into a tab panel.

Any help would be appreciated, store source:

var bufferedReader = new Ext.ux.data.BufferedJsonReader({
root: 'items',
versionProperty: 'version',
totalProperty: 'total_results',
id: 'PersonnelID'
}, [
{name: 'PersonnelID', type: 'int', mapping: 'PersonnelID'},
{name: 'firstname', type: 'string', mapping: 'firstname'},
{name: 'lastname', type: 'string', mapping: 'lastname'},
{name: 'company', type: 'string', mapping: 'company'},
{name: 'department', type: 'string', mapping: 'department'},
{name: 'email', type: 'string', mapping: 'email'},
{name: 'ext', type: 'string', mapping: 'ext'}
]);


aEmployeeDataStore = new Ext.ux.grid.BufferedStore({
autoLoad: true,
bufferSize: 250,
reader: bufferedReader,
sortInfo: {field: 'lastname', direction: 'ASC' },
url : 'services.php?target=personnel',
baseParams: {
action: 'LIST'
}
});

ThorstenSuckow
27 Aug 2008, 6:20 AM
autoLoad: true,


Please set this property for the "store" to "false" and try again :)


Edit: Ah sorry, been on the wrong track. Please check out the demo at http://www.siteartwork.de/livegrid_demo . If everything works in your browser using this demo, please use this example in your existing code. Can't tell you more right now wothout seeing the complete source, but usually the BufferedGridView.onBeforeLoad method takes care of initializing the options.params property for the server request...

sstratton
27 Aug 2008, 6:30 AM
Please set this property for the "store" to "false" and try again :)
Still getting this.addEvents is not a function. I turned verbose errors off but here's what I'm seeing
this.addEvents is not a function
(?)()(Object nearLimit=75 loadMask=Object)9EqSXy6I...1ew%3D%3D (line 51)
(?)()()personne..._grid.php (line 134)
EventManager()()ext-all.js (line 12)
camelFn()()ext-all.js (line 13)

chrome://firebug/content/blank.gifundefined

ThorstenSuckow
27 Aug 2008, 6:38 AM
Still getting this.addEvents is not a function. I turned verbose errors off but here's what I'm seeing
this.addEvents is not a function
(?)()(Object nearLimit=75 loadMask=Object)9EqSXy6I...1ew%3D%3D (line 51)
(?)()()personne..._grid.php (line 134)
EventManager()()ext-all.js (line 12)
camelFn()()ext-all.js (line 13)
chrome://firebug/content/blank.gifundefined

That looks more like the BufferedGridView is not properly initialized. Check if you're loading the source for BufferedGridView and if that does not help, please post the complete setup of your livegrid! ~o)

sstratton
27 Aug 2008, 6:51 AM
my buffered Grid View is

aEmployeeView = new Ext.ux.grid.BufferedGridView({
nearLimit: 75,
loadMask: {
msg: "Please Wait...."
}
});

This was taken out of an example on your site prior to it going down, only thing I changed was the limit to 75

ThorstenSuckow
27 Aug 2008, 7:11 AM
my buffered Grid View is

aEmployeeView = new Ext.ux.grid.BufferedGridView({
nearLimit: 75,
loadMask: {
msg: "Please Wait...."
}
});

This was taken out of an example on your site prior to it going down, only thing I changed was the limit to 75


Are you sure you're loading the unmodified BufferedGridView into your page?

If that doesn't help, strip out the source and build a window with your livegrid code. If it doesn't work, send me your example, I'll have a look at it then.

sgoswami
28 Aug 2008, 4:36 AM
Hi Thorsten,

Is it possible to use Row-expander to work with Livegrid? It's not working for me :-(

Thanks in anticipation,
sgoswami

ThorstenSuckow
29 Aug 2008, 7:25 AM
Hi all,

I have released 0.2rc1 of Ext.ux.Livegrid today. Most notable improvement is a change in the way the view component calculates the number of displayable rows: The last row is not removed anymore if it does not fit into the viewport, but clipped: The complete viewport can now be used by grid rows.
This feature seemed very important to me, so I made a point release instead a maintenance release out of it.

Support for Ext 2.2 is now postponed for release 0.3.

Changelog as usual available on the first page!


~o)

ThorstenSuckow
29 Aug 2008, 12:34 PM
First bugs have been fixed, reflected as usal in svn (http://code.google.com/p/ext-ux-livegrid/source/browse/#svn/trunk) and tagged as 0.2rc2 (http://code.google.com/p/ext-ux-livegrid/source/browse/#svn/tags/release-0.2rc2). Thanks all for the feedback!

pkmiec
29 Aug 2008, 4:02 PM
I find it useful to show the loadMask while sorting. I accomplish this by adding the following to BufferedGridView. Thought I'd share ... maybe there is a better way.



onHeaderClick : function(g, index){
if(this.headersDisabled || !this.cm.isSortable(index)){
return;
}
this.showLoadMask(true); // <-- added line to original implementation
g.stopEditing(true);
g.store.sort(this.cm.getDataIndex(index));
}

ThorstenSuckow
29 Aug 2008, 4:06 PM
I find it useful to show the loadMask while sorting. I accomplish this by adding the following to BufferedGridView. Thought I'd share ... maybe there is a better way.



onHeaderClick : function(g, index){
if(this.headersDisabled || !this.cm.isSortable(index)){
return;
}
this.showLoadMask(true); // <-- added line to original implementation
g.stopEditing(true);
g.store.sort(this.cm.getDataIndex(index));
}



I wonder what kind of BufferedGridView you're using, as the original version does not override the method "onHeaderClick" ;)

ThorstenSuckow
29 Aug 2008, 4:47 PM
I'm working hard on getting 0.2 out so I can create the 0.3 branch for Ext 2.2 compatibility... anyway, new bugs found, new bugs fixed. 0.2rc3 (http://code.google.com/p/ext-ux-livegrid/source/browse/#svn/tags/release-0.2rc3) is available for rurther testing!
Ext.ux.Livegrid now works with Safari 3.1 on windows!

ThorstenSuckow
29 Aug 2008, 5:00 PM
If i have only 4 records and the window could display 10 then the scrollbar is disabled.
But if I resize the window to 3 records only. Then the scrollbar doesn't enable and the data doesn't load new.

your problem should be solved with 0.2rc3

pkmiec
29 Aug 2008, 7:52 PM
I wonder what kind of BufferedGridView you're using, as the original version does not override the method "onHeaderClick" ;)

Sorry, I wasn't clear. I copied onHeaderClick from GridView to BufferedGridView and added that single line to show the mask.

ThorstenSuckow
30 Aug 2008, 9:07 AM
release candidate 4 for 0.2 is available for testing: 0.2rc4 (http://code.google.com/p/ext-ux-livegrid/source/browse/#svn/tags/release-0.2rc4)

stevets
31 Aug 2008, 9:42 AM
If I am not updating the Grid, do I need to specify the 'versionProperty' ? I just set it to be the same as my total count ('results') thinking that should uniquely identify the 'version'. Could use (or incorrect use) of version property be what is maybe causing my 'constant update' problem?

Did you get an answer to this question about the versionProperty? I too have the same question and did not find an answer on this thread.

ThorstenSuckow
31 Aug 2008, 10:08 AM
Did you get an answer to this question about the versionProperty? I too have the same question and did not find an answer on this thread.

The version's property use is totally up to you and right now no part of the livegrid's implementation listens to the "versionchange" event.

However, if you pass a version property, the store will read it out and fire this event if the value changes between two (buffer) requests.

What you do with it is up to you - if you have pending selections (i.e. ranges of row-indexes (NOT! record indexes)) which should be selected, but for which no records have been loaded yet, you could remove those selections as you would not know if any data has been slipped right in between this range of selections, which could lead to data inconsistency if you're about to send a "delete" request to the server with the ranges of pending selections available.

Anyway, the component has been refactored up to a degree where handling selections and pending selections has been greatly improved and simplified, along with other changes to the UI so the component looks like a "real" Ext grid. This changes will make it into the 0.2 branch before backwards compatibility will be broken (due to Ext 2.2 support). ~o)

nctag
1 Sep 2008, 2:02 AM
Thank you for your fixes. Especially thanks for fixed the problems if there were less records than could be displayed.

Do you have any plans to implement a fix for the scrolling bug in the next version or is that a lower priority? For us it's the highest priority so we cannot use the actual version because of that bug. We're using Ext 2.2. You said a week before you would implement it into version 0.2. Am I right that you are working on it?~o)

ThorstenSuckow
1 Sep 2008, 6:20 AM
Thank you for your fixes. Especially thanks for fixed the problems if there were less records than could be displayed.

Do you have any plans to implement a fix for the scrolling bug in the next version or is that a lower priority? For us it's the highest priority so we cannot use the actual version because of that bug. We're using Ext 2.2. You said a week before you would implement it into version 0.2. Am I right that you are working on it?~o)

Ah no... Ext 2.2 support will be in 0.3... this is scheduled for end of september, at last my bugtracker tells me so :)

nctag
1 Sep 2008, 6:55 AM
Ah no... Ext 2.2 support will be in 0.3... this is scheduled for end of september, at last my bugtracker tells me so :)

Check this out:
http://www.extjs.com/forum/showthread.php?p=213868#post213868

Ext2.2 support is scheduled for V0.2.

But anyway we wait then until end of september. Thank you for your support.

shiweiwei97
2 Sep 2008, 1:16 AM
Is it possible to have pagination in LiveGrid? If the total count is very large (greater than 10000), it will be hard to control the scroll bar to navigate to a particular record.

In normal GridPanel, a large page size will cause a performance problem. But in LiveGrid only the visible rows will be rendered. So it seems that the combination of LiveGrid and pagination will be the ideal solution.

ThorstenSuckow
2 Sep 2008, 1:27 AM
Is it possible to have pagination in LiveGrid? If the total count is very large (greater than 10000), it will be hard to control the scroll bar to navigate to a particular record.

In normal GridPanel, a large page size will cause a performance problem. But in LiveGrid only the visible rows will be rendered. So it seems that the combination of LiveGrid and pagination will be the ideal solution.

AFAIK there is already an implementation of a buffered paging grid... might be wrong though... but I have written one for my company a while ago so it should not be too hard to do that. However, paging support is not planned for Livegrid.

NicoP
2 Sep 2008, 3:48 AM
Hi,

thanks for this "live grid". Great works!

Is it possible to lock the first column and activate horizontal scroll only for the other columns?

Thanks.

shiweiwei97
2 Sep 2008, 5:36 AM
AFAIK there is already an implementation of a buffered paging grid... might be wrong though... but I have written one for my company a while ago so it should not be too hard to do that. However, paging support is not planned for Livegrid.

Could you share the link of the buffered paging grid? I searched in this forum and google as well but all I could find is your LiveGrid extension:">

ThorstenSuckow
2 Sep 2008, 5:41 AM
Could you share the link of the buffered paging grid? I searched in this forum and google as well but all I could find is your LiveGrid extension:">

Well, I thought it was somewhere in the extension forum... I'm sure someone posted something similiar but as I said, I might be wrong... can't provide a link, sorry.

shiweiwei97
2 Sep 2008, 7:02 AM
Well, I thought it was somewhere in the extension forum... I'm sure someone posted something similiar but as I said, I might be wrong... can't provide a link, sorry.
Would you kindly give me some guide in implementing the buffered paging grid? How to keep the selection model and filtering functionalities in the extension?
Thanks.

NicoP
2 Sep 2008, 7:38 AM
Is it possible to lock the first column and activate horizontal scroll only for the other columns?


I take a look to the plugin "Grid with locked column" : http://extjs.com/forum/showthread.php?t=17942

It works for "standard" grids which extends Ext.grid.gridPanel etc...
However, it is not easy to use this plugin with "livegrid" plugin : the both overwrite the class Ext.grid.GridView.

Does someone try successfully to merge those two plugins?

Thanks.

Kango_V
3 Sep 2008, 11:46 PM
Real cheeky, but are you planning doing a Live grid for ExtGWT? If not, can you give me some pointers on how you implemented the js one?

I'm having difficulty in knowing where the scroll thumb is. Also, I'm trying to implement a paging buffer to remove any delay.

Thanks.

ThorstenSuckow
4 Sep 2008, 1:08 AM
Real cheeky, but are you planning doing a Live grid for ExtGWT? If not, can you give me some pointers on how you implemented the js one?

I'm having difficulty in knowing where the scroll thumb is. Also, I'm trying to implement a paging buffer to remove any delay.

Thanks.

Kango, take a look at http://code.google.com/p/gwt-ext-ux/ , there is already a port - maybe that could give you a few hints...

I'm not involved in that port, however.

Kango_V
4 Sep 2008, 1:46 AM
Thanks for that, but it's for GWTExt. I'll have a look at the code to see how i can port it to ExtGWT.

I'll let you know how i get on.

Kango_V
4 Sep 2008, 2:00 AM
That's going to be no use, as they are just wrapping your LiveGrid !!! Well, that's what it looks like anyway.

Can you give me some pointers on where to start the conversion.

I that the GridView has been extended. Would i need to do that in a GXT LiveView?
These are the things that i am unsure about.

I'm new to JS, but am ok with Java.

JoomlaMan
4 Sep 2008, 4:08 AM
Does the performance of this grid degrade as amount of rows returned by the initial query increase and number of columns requested increase?

ThorstenSuckow
4 Sep 2008, 4:11 AM
That's going to be no use, as they are just wrapping your LiveGrid !!! Well, that's what it looks like anyway.

Can you give me some pointers on where to start the conversion.

I that the GridView has been extended. Would i need to do that in a GXT LiveView?
These are the things that i am unsure about.

I'm new to JS, but am ok with Java.

Sorry, I'm totally unfamiliar with GWT, so I can't help you on that...

NicoP
4 Sep 2008, 8:10 AM
May be the quickest solution is to use Javascript Native Code inside GWT....

sstratton
4 Sep 2008, 10:28 AM
Interesting problem, I load the data store and data displays in my grid on initial load, aEmployeeDataStore.load({params: {start: 0, limit: 150}});, which matches the settings of 150 in the buffer, and I get no scrollbar. I reload the grid via any action (sort, etc) and I get a scrollbar. Also worth noting it doesn't give me totals or x of y in the bufferedtoolbar.

ThorstenSuckow
4 Sep 2008, 10:52 AM
Interesting problem, I load the data store and data displays in my grid on initial load, aEmployeeDataStore.load({params: {start: 0, limit: 150}});, which matches the settings of 150 in the buffer, and I get no scrollbar. I reload the grid via any action (sort, etc) and I get a scrollbar. Also worth noting it doesn't give me totals or x of y in the bufferedtoolbar.

Need... some... source code... ;)


Alspo make sure you checked out rc5 out of the trunk!

nctag
4 Sep 2008, 11:12 AM
I tested the newest rc5 with my modification so that I was able to use the fixed and the scrollbar fix too. First of all a big thank to all fixes. It works great so far. But there occures an error if there are less records in de database available than could be diplayed. Imagine like that:

You have an db table with the users. but there are only 2 users in the table. So the livegrid is as height as 10 records could be displayed. The data will be loaded correctly. But if you perform a resize so that only 1 record could be displayed, there is no scrollbar and the second record won't be hidden.

I hope you understand what I mean. Maybe you can test it too an tell me wheter it is a bug or it's just my mistake. If you don't undestand it, don't avoid to ask me!

Kind regards
nctag

ThorstenSuckow
4 Sep 2008, 11:18 AM
You have an db table with the users. but there are only 2 users in the table. So the livegrid is as height as 10 records could be displayed. The data will be loaded correctly. But if you perform a resize so that only 1 record could be displayed, there is no scrollbar and the second record won't be hidden.


nctag, can you provide a screenshot of the error? I can remember similiar behavior when I resized a window to a ridiculous small value - the scrollbar is gone then. But rendering would work as usual, i.e. little bit of first row shown, second row hidden...

nctag
4 Sep 2008, 11:28 AM
Here you are.

There are 3 screenshots:
1. start situation
2. resize to 2 records
3. resize to 2 and a half record

I performed only those steps that are documented by the screenshots. It should be very clearly for you now. If not, I will set up a live example for you. But it would cost me some work.

Questions or can you follow the discription and the screenshots?

ThorstenSuckow
4 Sep 2008, 11:31 AM
Here you are.

There are 3 screenshots:
1. start situation
2. resize to 2 records
3. resize to 2 and a half record

I performed only those steps that are documented by the screenshots. It should be very clearly for you now. If not, I will set up a live example for you. But it would cost me some work.

Questions or can you follow the discription and the screenshots?

nctag, thanks for the effort creating those graphics. I'll look into it!

nctag
6 Sep 2008, 5:32 AM
Hi MindPatterns

I've just fixed another bug. It was the bug reported by me yesterday. So please try out this file and tell me your expirience with it.

As I tested it before It worked really fine and should fix the Ext 2.2 problems (at least the most important of it).

Like every time i fixed something you can reach the recent lines by searching for "fixed by nctag".

NicoP
10 Sep 2008, 6:49 AM
Hi,

I need to update the current live grid content when a "realtime-event" occurs.

To update the current visible rows I use this function:


mygrid.getView().updateLiveRows(mygrid.getView().lastRowIndex,true,true);However this function only call the server and do not refresh data in the grid.
So I add this function able to refresh grid contents


mygrid.getView().replaceLiveRows(mygrid.getView().lastRowIndex,true);However I cannot call this function before the function "updateLiveRows" has finished (async callback inside).

I can do this but it is not a good way:



mygrid.getView().updateLiveRows(mygrid.getView().lastRowIndex,true,true);
setTimeout(
function(){
mygrid.getView().replaceLiveRows(mygrid.getView().lastRowIndex,true);
}, 200); Any better ideas?

Thanks for your help.

ThorstenSuckow
10 Sep 2008, 7:01 AM
Hi,

I need to update the current live grid content when a "realtime-event" occurs.

To update the current visible rows I use this function:


mygrid.getView().updateLiveRows(mygrid.getView().lastRowIndex,true,true);However this function only call the server and do not refresh data in the grid.
So I add this function able to refresh grid contents


mygrid.getView().replaceLiveRows(mygrid.getView().lastRowIndex,true);However I cannot call this function before the function "updateLiveRows" has finished (async callback inside).

I can do this but it is not a good way:



mygrid.getView().updateLiveRows(mygrid.getView().lastRowIndex,true,true);
setTimeout(
function(){
mygrid.getView().replaceLiveRows(mygrid.getView().lastRowIndex,true);
}, 200); Any better ideas?

Thanks for your help.


Update the records in the store... the corresponding listeners will update the view for you, then.

NicoP
10 Sep 2008, 7:50 AM
Thanks for your help.

However if I replace this line :


mygrid.getView().updateLiveRows(grid.getView().lastRowIndex,true,true);

with this line :


mygrid.getStore().load();

The data is well refreshed however the vertical scroll is also reset I start reading the datagrid from the beginning. (It is the same action as the refresh button in the bottom toolbar).

Is there a better way to refresh only the current visible part of the grid?

The final idea is to use highlight color for each updated rows like this:


var row = grid.getView().getRow(rowIndex);
if(row!=null) {
var el = Ext.fly(row);
el.highlight(color,{"duration":3.00});
}

Thanks.

akannu
10 Sep 2008, 9:15 AM
Has anyone used Livegrid + the Grid Filter plugin? I'm trying this out and the grid and filters work as expected except when I apply a filter and then scroll the grid -- once the grid makes a request for new rows, it doesn't pass the filter to my server-side function so it ends up pulling new rows from an unfiltered dataset...

Any ideas on how to pass the filters through livegrid and back to the server?

thx

Matt

I have the same question. Has this be answered already and did I miss it?

NicoP
10 Sep 2008, 11:27 PM
To pass aditionnals filters or parameters to the server I use session's attributes.

ThorstenSuckow
11 Sep 2008, 12:44 AM
I have the same question. Has this be answered already and did I miss it?

Hi,


a filter should be used server side. Here's how I pass additional parameters if I want to change the result set that should be rendered into the view:

First off, you need to tell the grid that the data in the store has changed: You can d this by calling the


reset()

method of the grid's view and by passing "true" as the argument:



this.grid.view.reset(true);


This forces the grid to request data from the server by totally resetting all properties - the view gets refreshed, then. Passing arguments to the server can be done by changing the attributes of the params-object that is used to communicate with the server. This is an example of sending additional parameters to the server - you must specify an event listener for the grids store's "beforeload"-event:




onGridStoreBeforeLoad : function(store, options)
{
if (!options.params) {
options.params = {};
}

options.params.filterField = 'someField'

}



Please note that the "beforeload" event of the grid's store only fires "once": When requesting new data for buffering, the "*buffer" events will be triggered. However, arguments you have passed to the server using the above method will still exist in the params-obejct.

To reset the grid and to refresh the view , just call "reset(true)" and make sure you change the "beforeload"-listener accordingly.

ThorstenSuckow
11 Sep 2008, 12:46 AM
Hi MindPatterns

I've just fixed another bug. It was the bug reported by me yesterday. So please try out this file and tell me your expirience with it.

As I tested it before It worked really fine and should fix the Ext 2.2 problems (at least the most important of it).

Like every time i fixed something you can reach the recent lines by searching for "fixed by nctag".

nctag, thank you very much for your contributions. I'm back at home from a business trip and will take care of it! Again, thanks a lot!

ThorstenSuckow
11 Sep 2008, 12:52 AM
Thanks for your help.

However if I replace this line :


mygrid.getView().updateLiveRows(grid.getView().lastRowIndex,true,true);

with this line :


mygrid.getStore().load();

The data is well refreshed however the vertical scroll is also reset I start reading the datagrid from the beginning. (It is the same action as the refresh button in the bottom toolbar).

Is there a better way to refresh only the current visible part of the grid?

The final idea is to use highlight color for each updated rows like this:


var row = grid.getView().getRow(rowIndex);
if(row!=null) {
var el = Ext.fly(row);
el.highlight(color,{"duration":3.00});
}

Thanks.

I still don't fully understand what you are about to do, however I can give you a few hints, I guess.

1) If you take a look at the "processRows()" method of the grid view, you can see how grid rows get painted "selected". You could probably override this method and implement additional logic for highlighting your rows.

2) Use a field in a record which is used to represent a data row. Change the attribute of the record, for example "highlited", whenever you want to paint the record as highlighted (true/false)... then add you own renderer which is used to paint the row according to the "highlighted"-property of the record, just like you would do it in a normal grid.

This would probably be the recommended method...

ThorstenSuckow
11 Sep 2008, 4:25 AM
Hi MindPatterns

I've just fixed another bug. It was the bug reported by me yesterday. So please try out this file and tell me your expirience with it.

As I tested it before It worked really fine and should fix the Ext 2.2 problems (at least the most important of it).

Like every time i fixed something you can reach the recent lines by searching for "fixed by nctag".

Hey nctag,

I just tried to reproduce your error, but had no success. I guess it's related to Ext 2.2 which I currently do not use yet. If you can reproduce this error with 2.1 and the latest Livegrid version out of the trunk, just tell me, otherwise I'll postpone this bug to the 0.3 release.

wasp
11 Sep 2008, 6:01 AM
I don't know if it's a bug or not ... but only happens to livegrid and i could not find any info on this ...

see the screenshot:

http://up.drun.net/files/buffered.png (http://up.drun.net)

The scroll bar is on the right of the column headers. Normally it's below the last column header which is with width equal to the scroll's width ...

is this normal ?

ThorstenSuckow
11 Sep 2008, 6:06 AM
I don't know if it's a bug or not ... but only happens to livegrid and i could not find any info on this ...

see the screenshot:

http://up.drun.net/files/buffered.png (http://up.drun.net)

The scroll bar is on the right of the column headers. Normally it's below the last column header which is with width equal to the scroll's width ...

is this normal ?



It's not a bug...it's a feature ;)

0.3 has a complete UI-change, so that it looks more like a native Ext grid... until then, the scrollbar on the right side is the way to go! ~o)

nctag
11 Sep 2008, 7:31 AM
Hey nctag,

I just tried to reproduce your error, but had no success. I guess it's related to Ext 2.2 which I currently do not use yet. If you can reproduce this error with 2.1 and the latest Livegrid version out of the trunk, just tell me, otherwise I'll postpone this bug to the 0.3 release.

I confirm that it is a Ext 2.2 only bug. So don't care about it until the 0.3 release. I thought it would be clear that it's only for Ext 2.2. I am very sorry.

But I have got another question.

Is it possible to set the position to a specific record?
Let's say we have 10000 records in the livegrid. I now want to go per a button to the 5869. Record because this record is relevant in an other context. So I have to set the position to record 5869. It must be possible because you set the position also when a user uses the scroll bar. But I could not find the right way up to now. Do you have an example how to realize it correctly?

Thank you very much and ~o)

ThorstenSuckow
11 Sep 2008, 7:45 AM
I confirm that it is a Ext 2.2 only bug. So don't care about it until the 0.3 release. I thought it would be clear that it's only for Ext 2.2. I am very sorry.

But I have got another question.

Is it possible to set the position to a specific record?
Let's say we have 10000 records in the livegrid. I now want to go per a button to the 5869. Record because this record is relevant in an other context. So I have to set the position to record 5869. It must be possible because you set the position also when a user uses the scroll bar. But I could not find the right way up to now. Do you have an example how to realize it correctly?

Thank you very much and ~o)

You should be able to do so by calling "ensureVisible" programmatically. Give it a try! If it fails, just drop me a line...

nctag
11 Sep 2008, 1:37 PM
Great job. Semms to work correctly so far. I have to do a lot of tests now.
Thank you very much and ~o)I-|

Jabe
12 Sep 2008, 5:28 AM
So 0.2 is not compatible with Ext 2.2? At least for me, scrolling with mouse wheel or arrow keys still keeps on jumping to the top.

By the way,
when using store.load({ callback: ... }) the callback is never called. Maybe it's some error with my own code, but I think this is a bug in BufferedGridView's onBeforeLoad listener (line 887 v0.2):

options.callback = function(){this.reset(false);};I am pretty sure this line overwrites the callback.

mystix
12 Sep 2008, 9:16 AM
@brian posted a hotfix for the grid scrolling to the top when the grid is refreshed:
http://extjs.com/forum/showthread.php?p=222805#post222805

that might help alleviate some of the issues you've been experiencing. try it and throw some feedback in that thread.

ThorstenSuckow
12 Sep 2008, 9:39 AM
So 0.2 is not compatible with Ext 2.2? At least for me, scrolling with mouse wheel or arrow keys still keeps on jumping to the top.


This will be fixed in 0.3 which is the target release for Ext2.2.

tsprague
16 Sep 2008, 2:11 PM
It's a bit of a pain to have to re-apply mattb's changes from http://extjs.com/forum/showthread.php?p=165263#post165263 to get the LiveGrid working with an EditorGridPanel every time the LiveGrid is updated.

Is there a chance we can get those changes merged into the plugin?

Thanks for all the great work!

Tibet

NicoP
17 Sep 2008, 2:22 AM
Hi,

I need to catch server error response on livegrid callback.
Where is the best place in livegrid framework to parse response result status like error 503, 404 etc...?

Thanks

ericd
17 Sep 2008, 9:34 AM
MindPatterns,

I did send you a private msg concerning some work that I dont mind paying for to be done on the grid? Do you prefer that I post this here?

E

ThorstenSuckow
17 Sep 2008, 1:41 PM
MindPatterns,

I did send you a private msg concerning some work that I dont mind paying for to be done on the grid? Do you prefer that I post this here?

E

Eric, you got a reply. Sorry it took so long, but I'm pretty busy with other Ext projects as usal.

changhua
19 Sep 2008, 1:37 PM
My page already loads 5000 records in an array.

Is it possible to supply local data to the BufferedStore instead of using the url? Can anyone provide such an example?

If "url" is not provided, beforeload event is not fired, which causes errors in loadRecords in BufferedStore.js.

Thanks a lot.

mpereira
23 Sep 2008, 11:40 AM
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:
handleReadyState function is called
POST is made
handleTransactionResponse function is called
releaseObject function is called--> On a bugged request:
handleReadyState function is called
POST is made
abort function is called from window.setTimeout
handleTransactionResponse function is called
releaseObject function is calledThis error occurs randomically and I have no idea of what is happening! Any ideas??

changhua
23 Sep 2008, 3:02 PM
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
24 Sep 2008, 9:21 AM
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
26 Sep 2008, 2:07 PM
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
29 Sep 2008, 1:14 PM
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.

http://www.siteartwork.de/images/intrabuild_grid.jpg

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
1 Oct 2008, 2:25 AM
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 (http://extjs.com/forum/showthread.php?t=37831&highlight=treegrid)?

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
1 Oct 2008, 3:21 AM
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
1 Oct 2008, 3:38 AM
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
7 Oct 2008, 12:36 AM
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
7 Oct 2008, 2:09 AM
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.

ub3rn00b
7 Oct 2008, 2:15 AM
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.

Thanks

Will give that a whirl, is a bit of a pain though to change all the grids i use in this project, but most can exist without the toolbar for now

Snakehit
9 Oct 2008, 10:47 PM
When do you think the next release will be ready? Same problem as ub3rn00b overhere and we have some projects running with the toolbars.

Maby some quick fix?

Kango_V
10 Oct 2008, 1:07 PM
Is this extension dual-licensed?

ThorstenSuckow
11 Oct 2008, 11:05 AM
Is this extension dual-licensed?

Yeah it's dual licensed. For those who want to stick with LGPL - anything prior to 0.3a1 is still LGPLed.

extjssiva
13 Oct 2008, 1:13 PM
cm : new Ext.grid.ColumnModel([
{header: "ID", align : 'left', width: 160, sortable: true, dataIndex: 'id'},
{header: "Name", align : 'left', css:'white-space:normal; font-color:red', resizable:false, width: 50, dataIndex: 'name'},

is working fine in the ExtJS grid. But I am not able to implement this in livegrid.. Any idea how to implement wordwrap in livegrid cells

tonedeaf
14 Oct 2008, 3:26 AM
Hi,

I really like this extension, and I'm following it for many months waiting for this to become robust. I think its very near its final release, and I want to bring attention to a small but important improvement:

The Grid should allow scrolling to any position first, then fetch the records.

Right now, if you try scrolling, it interrupts the scroll mid-way to fetch the records. This makes it very time consuming for the user to scroll to the last page of records.
The user may only be interested in finding out the records towards the end (like for eg. in an alphabetical list).

So, ideally the scroll should be allowed to move to any position, without interrupting. And when the scrolling has stopped, only then the records should be fetched.

EDIT - A good example of this behavior is the ActiveWidgets Grid in Virtual Rendering Mode. Check out the Grid with Virtual rendering-standard ActiveWidget Demo in the following link:

http://www.friendsofaw.com/nuke/modules.php?name=Demos

Another enhancement is the support for keyboard shortcuts: CTRL+HOME, CTRL+END, PageUp, PageDown. They are supported by the ExtJS Grids.

I hope you can consider this enhancement in the next release.

ericd
15 Oct 2008, 4:02 AM
I just want you to note that wordwrapping in the livegrid will break basically everything. I do do that (wrap) but this will throw off all scrolling calculations and therefore make it (the livegrid) unusable. The issue is that the calculations are based on the numbers of rows, where each row HAS to be the same height, i.e. it does not take into account variances in height. I did mention this to Mindpattern, and I hope he considers this to be top priority or else it will limit its applications and that would be a shame. His LiveGrid is really nice

vayumahesh
17 Oct 2008, 7:25 AM
livegrid extension is great. However I have a question regarding whether livegrid would support data grouping feature?

livegrid supports store and view with Ext.ux.grid.livegrid.Store and Ext.ux.grid.livegrid.GridView respectively ? In the source code, I could not find anything relative to Ext.data.GroupingStore and Ext.grid.GroupingView to support for grouping of data in the grid.

How to get data grouping to work with livegrid ?

Here is an example of what I am looking for.
http://dev.crw.gm.com/js/extJs/examples/grid/grouping.html (example demonstrates regular gridpanel with grouping feature)

tenthcup
20 Oct 2008, 10:30 AM
I just tried your demo site by using IE 6.0. Somehow I can't drag scroll bar to bottom or any position I want. I remembered it used to be working fine.

tenthcup
21 Oct 2008, 6:15 AM
I set bufferSize= 36 and nearLimit=12 to the livegrid. I have total data 64 rows. I realized the data retrieving in loop when I drag the scrollbar to the bottom which hit the start=27.

Gabor Turi
31 Oct 2008, 1:35 AM
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
31 Oct 2008, 1:57 AM
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
31 Oct 2008, 7:33 AM
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
31 Oct 2008, 7:41 AM
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
31 Oct 2008, 7:50 AM
Will you fix the scrolling issue for IE6.0 in next release?

maceido
31 Oct 2008, 8:23 AM
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
1 Nov 2008, 11:47 AM
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! ~o)

ub3rn00b
3 Nov 2008, 12:21 AM
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
3 Nov 2008, 1:23 AM
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
3 Nov 2008, 4:56 AM
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 ~o).

ThorstenSuckow
3 Nov 2008, 5:21 AM
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

Confusing... from the first screenshot it doesn't look like you're the latest version from the 0.3-branch. Also, which browser are you using?

Okay, gotcha. Should have read more carefully.

ThorstenSuckow
3 Nov 2008, 6:03 AM
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 ~o).

nctag, once again, thanks for your complete bug report. However - which browser are you using? I've tested with IE7, FF3, Chrome and Safari and could not reproduce the error. Did you check the latest version out of the trunk or did you download the package from the google-page?

gelleneu
3 Nov 2008, 8:43 AM
How can I use a cell selection model?!
I have an EditorGridPanel with Livegrid (latest Version 0.3a4) and
want to use cell selection. How to do this?

ThorstenSuckow
3 Nov 2008, 9:19 AM
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


Can you tell me more about the setup of the container that holds the Grid? Usually there shouldn't be an issue when the container has it's layout property set to "fit". You can omit the autoHeight or any other height property for the grid then.

ub3rn00b
5 Nov 2008, 12:42 AM
Bleeding notifications didn't work, good thing I checked.

I am using FF3, and grabbed the latest version from svn

here is the container code



var tabs = new Ext.TabPanel({
width:900,
height:280,
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
enableTabScroll:true,
frame:true,
items:[
<?= $GridArray?>
]
});

var subpanel2 = new Ext.FormPanel({
title: 'Billing Entry Details',
defaults:{autoScroll: true},
collapsible: true,
width:900,
height:280,
bodyStyle:'padding:5px 5px 0',
frame:true,
id: 'UpdatePanel',
items: [{
/*Removed for simplicity*/
}],
buttons: [{
/*Removed for simplicity*/
}]
});

var panel = new Ext.Panel({
title: 'Billing',
collapsible: true,
width:900,
height:580,
renderTo: 'layouttest',
items: [tabs, subpanel2]
});




Each grid is held in a tab, this tabpanel is then placed in a panel to create the top grids as seen in the SS, with the lower form created as a static item, hope this helps you out some more, if not shout.

I will try setting my layout container to fit and hope this solves it, thanks for the help so far :)

ThorstenSuckow
5 Nov 2008, 1:22 AM
Each grid is held in a tab, this tabpanel is then placed in a panel to create the top grids as seen in the SS, with the lower form created as a static item, hope this helps you out some more, if not shout.

I will try setting my layout container to fit and hope this solves it, thanks for the help so far :)

One thing that I'm curious about: Is there any reason why you don't use layout "border" for the panel that holds the tabs and the subpanel2? "tabs" could then sit in the center region and "subpanel2" in the "south" region...

ub3rn00b
5 Nov 2008, 2:01 AM
One thing that I'm curious about: Is there any reason why you don't use layout "border" for the panel that holds the tabs and the subpanel2? "tabs" could then sit in the center region and "subpanel2" in the "south" region...

Mostly because of the boss breathing down my back with his "are you done yet?" questions, this was the quickest way i saw of getting it working as ugly as it is.

GraemeBryce
5 Nov 2008, 2:13 AM
Perhaps I am being stupid here or is this a limitation of the original grid being an extension of panel?

I have config like



{xtype:'grid'
,rowIndex : 0
,autoFit:true

,view: new Ext.ux.grid.livegrid.GridView({
nearLimit : 100,
loadMask : {
msg : 'Please wait...'
}

,bbar: new Ext.ux.grid.livegrid.Toolbar({
view: this.view,
displayInfo:true
})

etc... etc...



I want to define both the view and the bbar in the config as above, however the bba needs a reference to the view in order to work and can not or does not attempt to get this from the grid.

Is it possible to define them both in config or must I declare the view as a variable and then use that within the view: config of both the grid and the bbar?

thanks

Graeme

ThorstenSuckow
5 Nov 2008, 3:43 AM
I want to define both the view and the bbar in the config as above, however the bba needs a reference to the view in order to work and can not or does not attempt to get this from the grid.

Is it possible to define them both in config or must I declare the view as a variable and then use that within the view: config of both the grid and the bbar?

thanks

Graeme

In your above code the "this" keyword does not reference the grid itself, but the context in which this component was created. You must definitely create a variable that holds the view first, and the assign this variable to the toolbar.

nctag
5 Nov 2008, 5:00 AM
nctag, once again, thanks for your complete bug report. However - which browser are you using? I've tested with IE7, FF3, Chrome and Safari and could not reproduce the error. Did you check the latest version out of the trunk or did you download the package from the google-page?
No problem. We want to use the extension in our projects so we help where we can.
I tested with FF 3.0.3 only and that was the result. I grabbed the rar package here: http://code.google.com/p/ext-ux-livegrid/downloads/list. But to ensure that this is not the problem I now gabbed the files from the trunk here: http://code.google.com/p/ext-ux-livegrid/source/browse/. Hope I am right now.

Unfortunantely the error occures as described above so I have no clue how to handle the mistake. Have you any idea? The most important fact is, that it is still working correctly with v.0.2. So the config should really be correct.:-/

ThorstenSuckow
5 Nov 2008, 5:04 AM
No problem. We want to use the extension in our projects so we help where we can.
I tested with FF 3.0.3 only and that was the result. I grabbed the rar package here: http://code.google.com/p/ext-ux-livegrid/downloads/list. But to ensure that this is not the problem I now gabbed the files from the trunk here: http://code.google.com/p/ext-ux-livegrid/source/browse/. Hope I am right now.

Unfortunantely the error occures as described above so I have no clue how to handle the mistake. Have you any idea? The most important fact is, that it is still working correctly with v.0.2. So the config should really be correct.:-/

Is there any way for ouy sending me the generated js sources over, so I can debug it? It's really hard to tell where the error is otherwise... ~o)

nctag
5 Nov 2008, 6:11 AM
The generating files could not be published completely but I can show you everything that is touching the livegrid. Because it's not only appearing in this case (another user reported it too) I think my code is really not the problem. Maybe its easier to debug his code but I still hope to help me with send you this code. You maybe have to change some lines for debugging by your own but I cannot give you our complete environment. Hope you can help.


[CODE]// Spalten auslesen
var cols = this.xml.getElementsByTagName( "column" );
var colId = this.xml.getElementsByTagName( "columns" ).item( 0 ).getAttribute( 'id' );
this.bez = this.xml.getElementsByTagName( "columns" ).item( 0 ).getAttribute( 'bezeichnung' );
var rArr = new Array();
var cArr = new Array();
var fArr = new Array();
for( var i=0; i < cols.length; i++ )
{
var field = cols[i].getAttribute( "field" );
rArr[i] = { name: field, sortType: 'string' };
cArr[i] = { id:field, header: cols[i].getAttribute( "textkey" ), dataIndex: field,
width: parseInt( cols[i].getAttribute( "width" ) ), sortable: true, align: 'left' };
fArr[fArr.length] = field;
}

//bufferedReader
var bufferedReader = new Ext.ux.grid.livegrid.JsonReader({
root : 'response.value.items',
versionProperty : 'response.value.version',
totalProperty : 'response.value.total_count',
id : 'id'
}, rArr );

if( this.sortfield === null )
this.sortfield = fArr[0];
if( this.sortdir === null )
this.sortdir = 'ASC';

//store
var bufferedDataStore = new Ext.ux.grid.livegrid.Store({
autoLoad : true,
bufferSize : 300,
reader : bufferedReader,
sortInfo : {field: this.sortfield, direction: this.sortdir },
url : 'index.php?ajax=3&objId='+this.id
});

//view
var bufferedView = new Ext.ux.grid.livegrid.GridView({
nearLimit : 100,
loadMask : {
msg : 'Please wait...'
}});

//toolbar
var bufferedGridToolbar = new Ext.ux.grid.livegrid.Toolbar({
view : bufferedView,
displayInfo : true
});

//selectionModel
var bufferedSelectionModel = new Ext.ux.grid.livegrid.RowSelectionModel();

//colModel
var colModel = new Ext.grid.ColumnModel( cArr );

//grid
this.grid = new Ext.grid.GridPanel({
ds : bufferedDataStore,
enableDragDrop : false,
cm : colModel,
sm : bufferedSelectionModel,
loadMask : { msg : 'Loading...' },
view : bufferedView,
border : false,
id : this.id+'grid',
bbar : bufferedGridToolbar
});

//tbar
var tbar = [];
if( tbarxml == null )
tbar = null;
else
{
if( tbarxml.getAttribute( "add" ) != 'false' )
tbar.push({ id: 'add', icon: 'images/add.gif', cls:"x-btn-text-icon", text:'Hinzuf

ThorstenSuckow
5 Nov 2008, 6:13 AM
The generating files could not be published completely but I can show you everything that is touching the livegrid. Because it's not only appearing in this case (another user reported it too) I think my code is really not the problem. Maybe its easier to debug his code but I still hope to help me with send you this code. You maybe have to change some lines for debugging by your own but I cannot give you our complete environment. Hope you can help.


Thanks. I'll set up a live demo later where I'll try to reproduce the code.

nctag
5 Nov 2008, 7:25 AM
Thank you for your patience and help. I'll wait for your answe then.

ThorstenSuckow
5 Nov 2008, 7:30 AM
Thank you for your patience and help. I'll wait for your answe then.

Dont forget your PM inbox! ~o)

maceido
5 Nov 2008, 7:37 AM
livegrid extension is great. However I have a question regarding whether livegrid would support data grouping feature?

livegrid supports store and view with Ext.ux.grid.livegrid.Store and Ext.ux.grid.livegrid.GridView respectively ? In the source code, I could not find anything relative to Ext.data.GroupingStore and Ext.grid.GroupingView to support for grouping of data in the grid.

How to get data grouping to work with livegrid ?

Here is an example of what I am looking for.
http://dev.crw.gm.com/js/extJs/examples/grid/grouping.html (example demonstrates regular gridpanel with grouping feature)

Hello,

Did you find the answer?


Regards,
DAvid

ThorstenSuckow
5 Nov 2008, 7:39 AM
Hello,

Did you find the answer?


Regards,
DAvid

Hi David,

grouping is planned but there is no date scheduled yet.

maceido
5 Nov 2008, 7:57 AM
Hi David,

grouping is planned but there is no date scheduled yet.

ok, thanks.

let me know if i can help somehow.

DAvid

zzo
5 Nov 2008, 12:40 PM
First - great extension! Looking forward to FLOSS licensing exceptions...

Anyhoo I'm running into to this problem that I've seen throughout this thread & don't think I saw the solution.

I'm using an HttpProxy with my Store, autoLoad = true, bufferSize = 100.

When my app loads up in firebug I see the GET requests with neither 'start' nor 'limit' parameters.

I then see the first however many records can fit into the GridView WITHOUT any scroll bars - so it's impossible to see the rows 'at the end' in the Store. If I think hit the 'refresh' button the live Toolbar I get infinite ajax loading with start = 0 and limit = 100...

If I set autoLoad = false & then I manually load the data by pressing the 'refresh' button in the live Toolbar the scroll bars show up fine & the live grid functionality works great.

Various combinations of calling 'load' & 'reload' setting 'start' & 'limit' (& not) results in the same problem - no scroll bars to scroll down to the 'bottom' rows.

Any ideas what's going on??
thanks!
Mark

zzo
5 Nov 2008, 3:35 PM
A quick update on the above - if at some point in the future I call 'gridPanel.sync()' the problem is resolved - however I'm not sure when exactly to call it.
I call in from firebug & things work out - when I put the syncSize() call in my code it doesn't... Tried in various places & in various event handlers, like 'render', 'show', 'activate' & no dice.
thanks,
Mark

ub3rn00b
6 Nov 2008, 4:09 AM
Can you tell me more about the setup of the container that holds the Grid? Usually there shouldn't be an issue when the container has it's layout property set to "fit". You can omit the autoHeight or any other height property for the grid then.
Ok just tried this with the layout:'fit' property set, seems to make no difference, any other ideas

maceido
7 Nov 2008, 5:22 AM
Okay, so the algorithm for computing the fetched rows together with the nearLimit and the bufferSize seems to cause the problems. I'll take care of this.

Hello,

After updating to the last livegrid version (0.3a4), I have also the same problem.
A concrete case: bufferSize = 50, nearLimit = 20.

if the size of the grid allows 9 rows or less visible at a time, then it works fine.
it the size of the grid allows 10 or more rows visible at at time, then it enters in an infinite loop, loading them same data (only _dc changes) over and over:
http://localhost/data.php?_dc=1226064030172&start=5197&limit=50

(the number of rows in the database seems to not affect)


Regards,
DAvid

jmariani
10 Nov 2008, 11:10 PM
Hi!

Is there any example of usage source code out there? I really want to test livegrid.

Thanks!

ub3rn00b
10 Nov 2008, 11:14 PM
http://www.siteartwork.de/livegrid

jmariani
11 Nov 2008, 5:47 AM
Thank you, but, where's the source code of the example?

ub3rn00b
11 Nov 2008, 5:53 AM
http://www.siteartwork.de/livegrid_demo/

right click view source ;)

jmariani
11 Nov 2008, 3:25 PM
tku.

ThorstenSuckow
12 Nov 2008, 11:36 AM
Hello,

After updating to the last livegrid version (0.3a4), I have also the same problem.
A concrete case: bufferSize = 50, nearLimit = 20.

if the size of the grid allows 9 rows or less visible at a time, then it works fine.
it the size of the grid allows 10 or more rows visible at at time, then it enters in an infinite loop, loading them same data (only _dc changes) over and over:
http://localhost/data.php?_dc=1226064030172&start=5197&limit=50

(the number of rows in the database seems to not affect)


Regards,
DAvid

David, thanks for your error report. I could reproduce it and will provide a fix for this issue.

Thorsten

ThorstenSuckow
12 Nov 2008, 11:53 AM
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

Hey there,

please make sure you are loading the css-file from the livegrid/resources/css folder into your page, since this file is mandatory, providing information about how the browser should render the scrollbar.

Thanks to nctag for his efforts, as he had the same problem and pointed out that it was due to the missing including of the css file.

jmariani
12 Nov 2008, 3:11 PM
Hi.

I'm having this error while loading from a php store.

Here's the code:

[CODE]// RECORD DEFINITION
var menuBrowserRecord = Ext.data.Record.create([
{name: 'menuId'},
{name: 'appName'},
{name: 'orden'},
{name: 'nombre'},
{name: 'descripcion'},
{name: 'parentMenu'},
{name: 'parentMenuDescription'},
{name: 'href'},
{name: 'favorite'},
{name: 'qtip'}
]);

// This is the column model for the grid.
var menuBrowserColumnModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: '#', id: 'menuId', dataIndex: 'menuId', align: 'right', hidden: true, hideable: false},
{header: 'Aplicaci

ThorstenSuckow
12 Nov 2008, 3:29 PM
Hi.

I'm having this error while loading from a php store.



Do not call "this.store.load()" in initComponent() - instead, set autoLoad of the store to "true", or wait until the GridPanel has rendered, and load the store programmatic.

jmariani
12 Nov 2008, 3:38 PM
Ok.

Setting "autoLoad: true" will call the php at program startup. If I have hundredths of grids, this is a big no-no.
Second option looks better: you mean I have to this.store.load at the beforeRender event?

Thank you.

jmariani
12 Nov 2008, 3:53 PM
Setting this

this.store.load({
params: {start: 0, limit: 25}
});

does not produce the error, but the grid shows no rows.

ThorstenSuckow
12 Nov 2008, 3:57 PM
Ok.

Setting "autoLoad: true" will call the php at program startup. If I have hundredths of grids, this is a big no-no.
Second option looks better: you mean I have to this.store.load at the beforeRender event?

Thank you.

It depends - in the example page on http://www.siteartwork.de/livegrid autoLoad is set to true, but it works since the store gets defined within the initComponent-method - and the View is fully rendered when the response arrives. It's still error prone, as the view has definitely to be rendered when the response is available. There will be a fix in the next release which will make this stable.

In your case, it'd be good if you load the store when rendering of the GridPanel has completed. So either sequence the "afterRender" method of the GridPanel or give the "render" (NOT the beforerender) event a shot.

jmariani
12 Nov 2008, 4:13 PM
OK.
This worked:
Putting this line within the initComponent:

this.on('render', function(){this.store.load();});

do the trick.

Thank you for a very good work.

Cya.

jmariani
12 Nov 2008, 4:18 PM
One more question:

I want the request to the server to be a GET, not a POST. How can I do that?

ThorstenSuckow
13 Nov 2008, 11:44 AM
One more question:

I want the request to the server to be a GET, not a POST. How can I do that?

You should create an individual proxy object and pass this as the "proxy" property to your store. See the API docs for Ext.data.HttpProxy for more information.

HTH

Thorsten

jmariani
13 Nov 2008, 11:49 AM
Tku!

jmariani
17 Nov 2008, 5:00 PM
Hi.

This code seems not to work (the removeButton doesn't get disabled):


menuBrowserSelModel = new Ext.ux.grid.livegrid.RowSelectionModel();
menuBrowserSelModel.on('selectionchange', function(sm){
var removeButton = Ext.getCmp('menuBrowserRemoveButton');
console.log(sm);
if (sm.selections.length == 0) {
removeButton.disable();
} else {
removeButton.enable();
}
});

Looks like the selectionchange is not fired when the gris is refreshed by clicking the "Refresh" button. It works when selecting rows.

Can you help?

Thank you in advance.

sureaintme
19 Nov 2008, 10:58 AM
@jmariani -

try using sm.getSelections() instead of sm.selections

sureaintme
19 Nov 2008, 11:08 AM
Has anyone successfully implemented a live grid with drag and drop enabled?

I realize that removing a record from the grid would screw with the index, but what I'd actually want to do is copy a record from the livegrid to another store, so i wouldn't be removing anything from the livegrid.

Setting enableDragDrop to true seems to break the grid. Any suggestions?

ThorstenSuckow
19 Nov 2008, 11:15 AM
Has anyone successfully implemented a live grid with drag and drop enabled?

I realize that removing a record from the grid would screw with the index, but what I'd actually want to do is copy a record from the livegrid to another store, so i wouldn't be removing anything from the livegrid.

Setting enableDragDrop to true seems to break the grid. Any suggestions?

Well, it should not. First off: Are you including the DragZone.js file that comes with the Ext.ux.Livegrid?

Secondly: Removing a record from the grid's store does not mess up the index. In fact, this was one of the major features I've worked on for the upcoming 0.3 release. Please see the "bulkRemove"-method from the Ext.ux.grid.livegrid.Store. If you experience any problems, please post a code-sample along with the error that gets thrown.

HTH


Thorsten

jmariani
19 Nov 2008, 11:22 AM
@jmariani -

try using sm.getSelections() instead of sm.selections
Hi. Thank you, but it doesn't work.
Looks like the event is not triggered when the livegrid is refreshed. I think the event should be triggered if I have rows selected and if I issue a refresh, it should either keep the rows selected (it's not happening, at least visually) or should trigger the event.

The code below is never executed when you issue a refresh:


menuBrowserSelModel = new Ext.ux.grid.livegrid.RowSelectionModel();
menuBrowserSelModel.on('selectionchange', function(sm){
var removeButton = Ext.getCmp('menuBrowserRemoveButton');
console.log(sm);
if (sm.getSelections().length == 0) {
removeButton.disable();
} else {
removeButton.enable();
}
});

sureaintme
19 Nov 2008, 11:44 AM
Thorsten,
Thanks for your quick response, you were absolutely right, I forgot to included the DragZone.js! D'oh!

It looks like this should work now... Thanks Again!

ThorstenSuckow
19 Nov 2008, 11:48 AM
Hi. Thank you, but it doesn't work.
Looks like the event is not triggered when the livegrid is refreshed. I think the event should be triggered if I have rows selected and if I issue a refresh, it should either keep the rows selected (it's not happening, at least visually) or should trigger the event.

The code below is never executed when you issue a refresh:


menuBrowserSelModel = new Ext.ux.grid.livegrid.RowSelectionModel();
menuBrowserSelModel.on('selectionchange', function(sm){
var removeButton = Ext.getCmp('menuBrowserRemoveButton');
console.log(sm);
if (sm.getSelections().length == 0) {
removeButton.disable();
} else {
removeButton.enable();
}
});

It's quite possible that I did not consider the selectionchange event enough while working on the selectionmodel. I'll check this. Until then, you could use the "select" and "deselect" events to check whether any selection is active.

ThorstenSuckow
19 Nov 2008, 11:49 AM
Thorsten,
Thanks for your quick response, you were absolutely right, I forgot to included the DragZone.js! D'oh!

It looks like this should work now... Thanks Again!


Glad I could help! ~o)

nctag
20 Nov 2008, 4:58 AM
Is any working example for a EditorLiveGrid available out there?

ThorstenSuckow
20 Nov 2008, 5:03 AM
Is any working example for a EditorLiveGrid available out there?

You should be able to use editing by simply changing the Ext.ux.grid.livegrid.GridPanel with the Ext.ux.grid.livegrid.EditorGridPanel-class.

jmariani
20 Nov 2008, 6:21 AM
It's quite possible that I did not consider the selectionchange event enough while working on the selectionmodel. I'll check this. Until then, you could use the "select" and "deselect" events to check whether any selection is active.
Hi.

Adding a fireevent('selectionchange'...) within the clearSelections function do the trick, because it looks like you clear all the selections when you do a refresh.

Cya.

jmariani
20 Nov 2008, 6:25 AM
Is any working example for a EditorLiveGrid available out there?
Here's a demo:

http://www.siteartwork.de/livegrid_demo/

NicoP
20 Nov 2008, 8:14 AM
Hi,

I am testing the last release of the live grid. I notice that the variable "bufferedSelections" has disappear. So when I select several rows I cannot use this king of function which works with older live grid release :

var rowList = Ext.encode(myGrid.getSelectionModel().bufferedSelections);

Is there a another way to retrieve multiple row selection ?

otherwise I will parse myGrid.getSelectionModel().getSelections() but with this functions we cannot retrieve row num...

Thanks

nctag
20 Nov 2008, 11:25 AM
You should be able to use editing by simply changing the Ext.ux.grid.livegrid.GridPanel with the Ext.ux.grid.livegrid.EditorGridPanel-class.
That was the first thing I've intuitively tested. It works very well! I just thought maybe there is an extra example that shows some things that should be respected but if there are none... it's also great B)

ThorstenSuckow
20 Nov 2008, 12:05 PM
That was the first thing I've intuitively tested. It works very well! I just thought maybe there is an extra example that shows some things that should be respected but if there are none... it's also great B)

Well, I've brought this feature into the 0.3 branch since so many people requested it and used hacks to use their own version of an EditorGrid.
You should consider that storing modified records and syncing changes on scroll afterwards does not fully work yet, as modified records get replaced upon buffering by the data that comes from the server. So by now, you should store all the changes you've made right after your edit field loses focus, i.e. send the request out to the server to store the changes permanently.

nctag
20 Nov 2008, 12:11 PM
Well, I've brought this feature into the 0.3 branch since so many people requested it and used hacks to use their own version of an EditorGrid.
You should consider that storing modified records and syncing changes on scroll afterwards does not fully work yet, as modified records get replaced upon buffering by the data that comes from the server. So by now, you should store all the changes you've made right after your edit field loses focus, i.e. send the request out to the server to store the changes permanently.
Well, that's really importan to know. I'll test it. I'm currently not sure how I'll use it, but just for information it would be nice to know wheter fully support is sheduled in 0.3 oder any other version?

ThorstenSuckow
20 Nov 2008, 12:20 PM
Well, that's really importan to know. I'll test it. I'm currently not sure how I'll use it, but just for information it would be nice to know wheter fully support is sheduled in 0.3 oder any other version?

I won't bring any new features into the 0.3, so I guess you'd have to wait for the 0.4 release ;)

nctag
20 Nov 2008, 12:26 PM
I won't bring any new features into the 0.3, so I guess you'd have to wait for the 0.4 release ;)
All right ;). 0.4 is not so far. Don't hurry up. I'm sure there is enough to do in 0.3 and other projects B).

ThorstenSuckow
20 Nov 2008, 12:31 PM
All right ;). 0.4 is not so far. Don't hurry up. I'm sure there is enough to do in 0.3 and other projects B).



You bet! ;)

jmariani
21 Nov 2008, 11:13 PM
Hi, having this error and can't find a way to solve it.

Code follows:


bdApp.appBrowserGrid = Ext.extend(Ext.ux.grid.livegrid.GridPanel, {
initComponent : function(){
// RECORD
var readerRecord = Ext.data.Record.create([
{name: 'rowId'},
{name: 'appName'},
{name: 'description'}
]);

// READER
var gridReader = new Ext.ux.grid.livegrid.JsonReader({
root : 'resultSet',
totalProperty : 'totalCount',
id : 'rowId'
}, readerRecord);

this.region = 'center';
this.anchor = '100% 100%';
this.autoExpandColumn = 'description';

// STORE
this.store = new Ext.ux.grid.livegrid.Store({
autoLoad : false,
bufferSize : 100,
reader : gridReader,
url : 'php/getAppBrowserStore.php'
});

// SELECTION MODEL
this.selModel = new Ext.ux.grid.livegrid.RowSelectionModel();

this.view = new Ext.ux.grid.livegrid.GridView({
nearLimit : 100,
loadMask : {msg : 'Cargando datos...'},
autoFill: true,
columnsText: 'Columnas',
sortAscText: 'Ordenar ascendente',
sortDescText: 'Ordenar descendente',
forceFit: true
});

//this.tbar = new appBrowserTBar();
this.bbar = new Ext.ux.grid.livegrid.Toolbar({
view : this.view,
displayInfo : true,
displayMsg : 'Mostrando {0} - {1} de {2} registros',
emptyMsg : 'No hay datos para mostrar',
refreshText : 'Releer datos',
});
this.on('render', function(){this.store.load();});
bdApp.appBrowserGrid.superclass.initComponent.call(this);
}
});

bdApp.appBrowser = Ext.extend(Ext.Panel, {
initComponent: function(){
var browserGrid = new bdApp.appBrowserGrid({
loadMask: 'Cargando datos...'
});

Ext.apply(this, {
layout: 'border',
border: true,
frame: true,
anchor: '100% 100%',
autoExpandColumn: 'desc',
items: [browserGrid]
});
bdApp.appBrowser.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('appBrowser', bdApp.appBrowser);


Thank you in advance.

NicoP
22 Nov 2008, 1:48 AM
I think that, the "nearLimits" value must be lower than the "bufferSize" otherwise the grid will be always reloaded each time you scroll lines.

jmariani
22 Nov 2008, 8:10 AM
I think that, the "nearLimits" value must be lower than the "bufferSize" otherwise the grid will be always reloaded each time you scroll lines.

Mmm, the error is more of "Can't find the fields for your store". Which is strange since is defined.

Here's my json response:


{'version': 0, 'totalCount': 2, 'resultSet':[{"rowId":"1","appName":"BDFE","description":"BDMex Consulting S.A. de C.V. - Factura Electr\u00f3nica"},{"rowId":"2","appName":"SYSTEM","description":"Aplicaci\u00f3n gen\u00e9rica."}]}

jmariani
22 Nov 2008, 10:03 AM
And this is the execution stack:


this.ds.fields.get(i) is undefined
getColumnData()()ext-all-debug.js (line 31542)
renderRows()(0, 0)ext-all-debug.js (line 31559)
renderBody()()ext.ux.l...veGrid.js (line 448)
refresh()(true)ext-all-debug.js (line 31594)
reset()(false)ext.ux.l...veGrid.js (line 345)
callback()()ext.ux.l...veGrid.js (line 900)
loadRecords()(Object success=true records=Object totalRecords=2 version=0, Object params=Object scope=Object, true)ext-all-debug.js (line 10860)
loadRecords()(Object success=true records=Object totalRecords=2 version=0, Object params=Object scope=Object, true)ext.ux.l...veGrid.js (line 2902)
loadResponse()(Object params=Object request=Object reader=Object, true, Object tId=3 status=200 statusText=OK)ext-all-debug.js (line 11342)
getViewWidth()(function(), Object events=Object conn=Object useAjax=true, Object 0=Object 1=true 2=Object, undefined)ext-base.js (line 9)
handleResponse()(Object tId=3 status=200 statusText=OK)ext-all-debug.js (line 5318)
getViewWidth()(Object conn=XMLHttpRequest tId=3, Object scope=Object argument=Object timeout=30000, undefined)ext-base.js (line 10)
getViewWidth()()ext-base.js (line 10)
[Break on this error] name : (typeof name == '...d' ? this.ds.fields.get(i).name : name),

ThorstenSuckow
22 Nov 2008, 3:05 PM
Hi, having this error and can't find a way to solve it.


Do you define any column model for the grid?

jmariani
22 Nov 2008, 3:05 PM
Hi.

The following code produces the following error:


this.ds.fields.get(i) is undefined
http://localhost/bdApp/tools/ext/ext-all-debug.js
Line 31542

Can somebody please help? I spent the last two days trying to figure why is failing.

Thank you in advance.

[CODE]Ext.namespace('bdApp');

bdApp.appBrowserGrid = Ext.extend(Ext.ux.grid.livegrid.GridPanel, {
autoExpandColumn: 'description',
initComponent : function(){

var gridReader = new Ext.ux.grid.livegrid.JsonReader({
root : 'resultSet',
//versionProperty : 'response.value.version',
totalProperty : 'totalCount',
id : 'rowId'
},[{
name : 'rowId'
},{
name : 'appName'
},{
name : 'description'
}]);

var gridStore = new Ext.ux.grid.livegrid.Store({
autoLoad : true,
bufferSize : 100,
remoteSort : true,
reader : gridReader,
url : 'php/getAppBrowserStore.php'
});


this.colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header: '#'}),
{header: '#', id: 'rowId', dataIndex: 'rowId', hidden: true},
{header: 'C

jmariani
22 Nov 2008, 3:06 PM
Yes:

this.colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header: '#'}),
{header: '#', id: 'rowId', dataIndex: 'rowId', hidden: true},
{header: 'C

ThorstenSuckow
22 Nov 2008, 3:11 PM
[QUOTE=jmariani;254075]Yes:

this.colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header: '#'}),
{header: '#', id: 'rowId', dataIndex: 'rowId', hidden: true},
{header: 'C

jmariani
22 Nov 2008, 3:14 PM
Holy cow!

Whithout rownumberer is Okay. But this is weird, because I have another liveGrid and have to problems with rownumberer, that's why I thought it wasn't the problem.

jmariani
22 Nov 2008, 3:21 PM
This code has rownumberer and performs ok.

[CODE]// RECORD DEFINITION
var menuBrowserRecord = Ext.data.Record.create([
{name: 'menuId'},
{name: 'appName'},
{name: 'orden'},
{name: 'nombre'},
{name: 'descripcion'},
{name: 'parentMenu'},
{name: 'parentMenuDescription'},
{name: 'href'},
{name: 'favorite'},
{name: 'qtip'}
]);

// This is the column model for the grid.
var menuBrowserColumnModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: '#', id: 'menuId', dataIndex: 'menuId', align: 'right', hidden: true, hideable: false},
{header: 'Aplicaci

ThorstenSuckow
22 Nov 2008, 3:33 PM
Confirmed. I have tested both setups and the second does work, while your first code snippet throws an error. I see what I can do...

jmariani
22 Nov 2008, 3:40 PM
Confirmed. I have tested both setups and the second does work, while your first code snippet throws an error. I see what I can do...
Thank you very much. I'll appreciate that.

Meanwhile I'll develop without rowNumberer.

ThorstenSuckow
22 Nov 2008, 3:47 PM
Thank you very much. I'll appreciate that.

Meanwhile I'll develop without rowNumberer.

[code]
{header: 'Descripci

jmariani
22 Nov 2008, 3:54 PM
[QUOTE=MindPatterns;254090][code]
{header: 'Descripci

ThorstenSuckow
22 Nov 2008, 4:04 PM
You're right.

Shame on me. I'm really sorry.:">

This kind of stuff dows not happen with Visual Basic 6.0

Well, this was the typical "4-eyes-see-more-than-2"-category bug. ~o)

ThorstenSuckow
23 Nov 2008, 11:15 AM
I would like to announce the release of Ext.ux.Livegrid 0.3RC1.

The release contains several bugfixes and introduces build tools to create minified and compressed versions of the Ext.ux.Livegrid scripts.

Due to changes in the way the specific renderer of the column model get called, plugins like the Ext.grid.RowNumberer can now be used without any problems.

This release is feature complete so far. New features will be available in 0.4.

Changelog is available on the first page.

Happy coding! ~o)

jmariani
23 Nov 2008, 2:51 PM
Cool, I installed it and so far it works Ok.

Thank you!

ThorstenSuckow
23 Nov 2008, 4:59 PM
Cool, I installed it and so far it works Ok.

Thank you!

You can now omit the call to load() in your listener for the render event and set "autoLoad" to true, since the Ext.ux.grid.livegrid.Store will only load if the view's render sequence has finished.

nctag
24 Nov 2008, 1:08 AM
As I've tested the RC1 there are no bugs in. But theres a behaviour that I cannot understand. If you refresh the grid by clicking on the button in toolbar or by code directly, the grid always gets on top. So if you are browsing let's say between records 1300 and 1340 and you confirm some changes in the database you want to reload the grid at that position at that it is currently. But as I have mentioned the grid always gets on top and you are not able to control this behaviour.

First, Am I right with that note?
Second, is this behaviour known? Are there any plans to implement a config option for the behaviour of the button in toolbar and a method to call by code maybe in 0.4?

ThorstenSuckow
24 Nov 2008, 1:38 AM
As I've tested the RC1 there are no bugs in. But theres a behaviour that I cannot understand. If you refresh the grid by clicking on the button in toolbar or by code directly, the grid always gets on top. So if you are browsing let's say between records 1300 and 1340 and you confirm some changes in the database you want to reload the grid at that position at that it is currently. But as I have mentioned the grid always gets on top and you are not able to control this behaviour.

First, Am I right with that note?
Second, is this behaviour known? Are there any plans to implement a config option for the behaviour of the button in toolbar and a method to call by code maybe in 0.4?

Yap, this is the way it's intented to be.

Row positions depend heaviliy on the version property which will be supported in one of the next releases. Basically, the grid will be very strict regarding the version property, so that as much data consistency as possible can be guaranteed.

Edit:
Which means: Row positions will be restored after a reload, if, and only if the version property did not change.

nctag
24 Nov 2008, 2:23 AM
Seems to be exactly that what I am looking for. Sounds really interesting. I'll be waiting for 0.4 ;). 0.3 RC1 semms to work properly, so far ;)

ub3rn00b
24 Nov 2008, 4:11 AM
Hey there,

please make sure you are loading the css-file from the livegrid/resources/css folder into your page, since this file is mandatory, providing information about how the browser should render the scrollbar.

Thanks to nctag for his efforts, as he had the same problem and pointed out that it was due to the missing including of the css file.

Sorry have been away last week, so I couldn't reply to this sooner.

Seems to have done the trick, as I said initially was probably something stupid, thanks for the help :)

jmariani
27 Nov 2008, 10:55 AM
You're not registering xtypes for this, aren't you?

Like:


Ext.reg('livegrid', Ext.ux.grid.livegrid.GridPanel);

jmariani
27 Nov 2008, 1:19 PM
Hi.

I'm trying to lazy load a whole panel with a livegrid embedded. I'm getting "this.view is undefined" while doing this:


{xtype: "panel", name:"currencyBrowser", title:"Monedas", layout:"fit", border:true, frame:true, anchor:"100% 100%", iconCls:"coins",items:{xtype: 'livegrid', view: new Ext.ux.grid.livegrid.GridView({nearLimit:50,loadMask:{msg : 'Cargando objetos...'},autoFill:true,columnsText:'Columnas',sortAscText:'Ordenar ascendente',sortDescText:'Ordenar descendente',emptyText:'No existen objetos que mostrar',forceFit:true}),bbar:new Ext.ux.grid.livegrid.Toolbar({view:this.view,displayInfo:true,displayMsg:'Mostrando {0} - {1} de {2} objetos',emptyMsg:'No existen objetos que mostrar',refreshText:'Releer objetos'}),name:"currencyBrowserGrid", autoexpandColumn:"description", storeId:"2", columns:[new Ext.grid.RowNumberer({header:'#'}),{id:'rowId',dataIndex:'rowId',header:'rowId',width:100,hidden:true,fixed:true},{id:'ISO4217A',dataIndex:'ISO4217A',header:'Código ISO-4217 Alfabético',width:150,hidden:false,fixed:true},{id:'ISO4217N',dataIndex:'ISO4217N',header:'Código ISO-4217 Numérico',width:150,hidden:false,fixed:true},{id:'description',dataIndex:'description',header:'Descripción',width:100,hidden:false,fixed:false}]}}


Thank you in advance!

ThorstenSuckow
27 Nov 2008, 1:42 PM
Most likely will the toolbar be the problem, where you use "this.view" to assign the view variable. However, it's unclear which scope "this" describes (unclear for the script interpreter, not for us ;) )

jmariani
27 Nov 2008, 2:21 PM
Most likely will the toolbar be the problem, where you use "this.view" to assign the view variable. However, it's unclear which scope "this" describes (unclear for the script interpreter, not for us ;) )

Well, yes, the issue is in the toolbar, while I'm trying to assign the grid's view to the toolbar. Even if I don't assign a view at all, it doesn't work.

Do you have any suggestion on how to make it Work?

Also: Neither GridView or BottomBar can be assigned through lazy instantiation. There's any reason for that?

Cya!

jmariani
27 Nov 2008, 10:47 PM
Most likely will the toolbar be the problem, where you use "this.view" to assign the view variable. However, it's unclear which scope "this" describes (unclear for the script interpreter, not for us ;) )

I spent yesterday's afternoon trying to work around this with no luck.
Looks like I'll have to extend your grid and create a preconfigured class with the toolbar and the view, and lazy-load the extended class from the remote store.
I'll try that tomorrow.

Cya.

sureaintme
3 Dec 2008, 2:28 PM
Hi All,
I'm trying to lock and unlock the DragZone to toggle DD on a livegrid. Unfortunately I can't seem to find the instance of DragZone created by the GridView. ExtJS default implementation of the grid creates a parameter called "dragZone" and adds it to the grid's view upon rendering.

Does anyone know if there is some other way to access it in the livegrid?

ThorstenSuckow
4 Dec 2008, 2:05 AM
Hi All,
I'm trying to lock and unlock the DragZone to toggle DD on a livegrid. Unfortunately I can't seem to find the instance of DragZone created by the GridView. ExtJS default implementation of the grid creates a parameter called "dragZone" and adds it to the grid's view upon rendering.

Does anyone know if there is some other way to access it in the livegrid?

Thanks for pointing this out, turns out that the GridView's dragZone is not properly initialized in Ext.ux.grid.livegrid.GridView.

Until a fix is available in SVN, please change line 340 in GridView.js from



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


to



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

epoks
5 Dec 2008, 8:45 AM
Hi all,

I have a problem with this extension

I need to use multi-line rows of different height, but it's impossible to choose a row when the scroll was used : the selected row isn't the one under the pointer (cf screen joined)

This problem appear when scroll is called (when positions for next rows are recalculated), but disappear later, when the number of scroll exceeds the number of lines initially shown.

This problem is present only for some first lines.

If all of rows are same height, there is no problem, but I need to have several row heights :(

I use "white-space:normal !important;" for multi-line

Any ideas ?

Thx

Epoks

PS : joined screen explain this problem

xsuniwov
5 Dec 2008, 6:14 PM
"livegrid-debug-all.js.js" might be changed to "livegrid-debug-all.js"?


I would like to announce the release of Ext.ux.Livegrid 0.3RC1.

The release contains several bugfixes and introduces build tools to create minified and compressed versions of the Ext.ux.Livegrid scripts.

Due to changes in the way the specific renderer of the column model get called, plugins like the Ext.grid.RowNumberer can now be used without any problems.

This release is feature complete so far. New features will be available in 0.4.

Changelog is available on the first page.

Happy coding! ~o)

ThorstenSuckow
7 Dec 2008, 9:26 AM
"livegrid-debug-all.js.js" might be changed to "livegrid-debug-all.js"?

thanks, this is fixed in 0.3RC2! Changelog available on the first page.

kfironit123
10 Dec 2008, 12:49 AM
Hello,

very nice work with this LiveGrid.
i would like to try and use it. do you have support for XMLReader as well?

Thanks!

fxmisticat
17 Dec 2008, 7:02 AM
when loading the grid have it scroll to the last item?

also when adding a row to scroll down?

badgerd
18 Dec 2008, 2:12 PM
Is there a way I can hide the refresh icon & function in the toolbar?

I would also like to have some text in place of this.

Would this allow for it?

mjlecomte
18 Dec 2008, 5:15 PM
Is there a way I can hide the refresh icon & function in the toolbar?

I would also like to have some text in place of this.

Would this allow for it?

I don't believe your question is specific to this extension, it's more of a general toolbar question. You might want to check the FAQ, I've been compiling questions for some time now: http://extjs.com/learn/Ext_FAQ_Grid#Paging_Toolbar_Loading_Indicator

fxmisticat
19 Dec 2008, 1:14 PM
Does anyone know how i can scoll the grid to the bottom using code?

fxmisticat
22 Dec 2008, 5:31 AM
any ideas on how to scroll the grid to the bottom?

nctag
23 Dec 2008, 4:47 PM
Perhaps the first post on this page: https://extjs.com/forum/showthread.php?p=224895 helps you?

changhua
23 Dec 2008, 6:41 PM
After pressing Ctrl+- to decreasing the font-size in Firefox, the scrollbar disappears.

sekundek
24 Dec 2008, 1:27 AM
I don't know if this was already answered but I need to know some info about LiveGird.
I have store with about 5.000 to 10.000 records. Loading speed in store is not a problem. Problem is with rendering so much rows with Ext grid. I takes to long and it's kinda useless. When I was looking why such worse performance I found out that Ext.grid is rendering all invisible rows to. When I checked demo of live grid I saw rendered only visible rows. I was wondering if it's possible to have store with all records without loading for example only 300 records in packets?

nctag
24 Dec 2008, 6:16 PM
Note that the store contains only the currently loaded (configurable) 300 records. If you reach the area (also configured) where the records seem to end, the LiveGrid gets another 300 records. It works like a buffer. It's best to setup a sample from the sample page and investigate the behaviour with firebug (FF extension)

HTH

fxmisticat
26 Dec 2008, 7:59 AM
okay It was easier than i though



reset : function(forceReload)
{
if (forceReload === false) {
this.ds.modified = [];
this.grid.selModel.clearSelections(true);
this.rowIndex = this.ds.totalLength;
this.lastScrollPos = 0;
this.lastRowIndex = 0;
this.lastIndex = 0;
this.adjustVisibleRows();
this.showLoadMask(false);
this.refresh(true);
//this.replaceLiveRows(0, true);
this.adjustScrollerPos(this.ds.totalLength*this.rowHeight, true);
return false;

fxmisticat
6 Jan 2009, 7:41 AM
no the problem is when it is out of range it calls ds.load and goes to the db again.?

ThorstenSuckow
8 Jan 2009, 1:22 AM
no the problem is when it is out of range it calls ds.load and goes to the db again.?

It'd help if you write down the use case and what you have so far. From what I've read you want to add records to the store, but keep the scrollbar at the bottom of the grid? The standard behavior of the grid is, that it will try to re-buffer the records if there were too many records appended somewhere at the end of the store: The component does not know the exact index of these records and assume it has to reload data to stay in sync.
Are you calling the findInsertIndex of Ext.ux.grid.livegrid.Store, the use this value for inserting the data at the given index?
conjoon uses the livegrid at one place to show the most recent emails that have been fetched: It always inserts the data at the index 0 and does not consider the findInsertIndex. I'd recommend you try the following:
- get the total number of records in the datastore
- insert the record at the specified index
- call the ensureVisible method from Ext.ux.grid.livegrid.GridView with the index

ThorstenSuckow
8 Jan 2009, 2:51 AM
I don't know if this was already answered but I need to know some info about LiveGird.
I have store with about 5.000 to 10.000 records. Loading speed in store is not a problem. Problem is with rendering so much rows with Ext grid. I takes to long and it's kinda useless. When I was looking why such worse performance I found out that Ext.grid is rendering all invisible rows to. When I checked demo of live grid I saw rendered only visible rows. I was wondering if it's possible to have store with all records without loading for example only 300 records in packets?

You can set the size of the buffer to the number of records your db contains. No buffering will happen then, since the first request loads all the records into memory.

changhua
9 Jan 2009, 6:57 PM
You can set the size of the buffer to the number of records your db contains. No buffering will happen then, since the first request loads all the records into memory.

My experience is that would be extremely slow for like 30000 records.

inptisto
13 Jan 2009, 6:49 AM
hello,

I need to add GridRowListener to my LiveGrid.
the problem is that the method addGridRowListener adds the listeners only to the first 300 rows. 300 is the buffersize of my BufferedStore.

Could you please help me!

regards,

ThorstenSuckow
13 Jan 2009, 6:54 AM
hello,

I need to add GridRowListener to my LiveGrid.
the problem is that the method addGridRowListener adds the listeners only to the first 300 rows. 300 is the buffersize of my BufferedStore.

Could you please help me!

regards,

pheew... what's a GridRowListener? Is that a user extension?

NicoP
15 Jan 2009, 4:55 AM
Hi,

I am testing BufferedGrid plugin however I got a problem: the last row is not display if I scroll slowly using the mouse wheel.

In the method "processRows" (BufferedGridView.js), just before to scroll the last row, the variable rows.length equals for instance 6 (because the grid panel height allow to display 6 rows in this case).
But after scrolling, in order to display the last row, the variable rows.length equals only 5. The last row is "undefined".
rows variable equals this.getRows() and this method have not been extended by the bufferedGridView object.

Any idea to solve this bug?

Thanks.

ThorstenSuckow
15 Jan 2009, 5:42 AM
Hi,

I am testing BufferedGrid plugin however I got a problem: the last row is not display if I scroll slowly using the mouse wheel.

In the method "processRows" (BufferedGridView.js), just before to scroll the last row, the variable rows.length equals for instance 6 (because the grid panel height allow to display 6 rows in this case).
But after scrolling, in order to display the last row, the variable rows.length equals only 5. The last row is "undefined".
rows variable equals this.getRows() and this method have not been extended by the bufferedGridView object.

Any idea to solve this bug?

Thanks.

Hi Nico,

thx for the report. First off: Are you using the latest version? Just curious since you are using old naming conventions in your post.

If you use the latest version: Would you mind posting your setup? Height of the grid, bufferSize, nearLimit. If you want, you can file the issue over at http://wiki.ext-livegrid.com

NicoP
15 Jan 2009, 6:22 AM
Hi,

I am using the release 0.2RC5, the last one using class names like "BufferedXXX.js" --> http://code.google.com/p/ext-ux-livegrid/source/browse/#svn/tags/release-0.2rc5/src%3Fstate%3Dclosed

I have to stay with this release for the moment because I added some modification to allow real-time refresh using "highlight row", especially in the function processRow of BufferedGridView object. The idea : a servlet is call every 3 seconds using an Ext runner task. If the json servlet output contains an update grid event, I have to refresh grid content and to highlight the updated rows.

For my problem, the last row can be displayed only if I resize the grid panel. In this case the layout function is automatically call and launch the function "adjustVisibleRows".
May be a solution can be to call the function "adjustVisibleRows" when the scrollbar reach the grid bottom ? :(

Thanks for your help.

ThorstenSuckow
15 Jan 2009, 6:27 AM
Hi,

I am using the release 0.2RC5, the last one using class names like "BufferedXXX.js" --> http://code.google.com/p/ext-ux-livegrid/source/browse/#svn/tags/release-0.2rc5/src%3Fstate%3Dclosed

I have to stay with this release for the moment because I added some modification to allow real-time refresh using "highlight row", especially in the function processRow of BufferedGridView object. The idea : a servlet is call every 3 seconds using an Ext runner task. If the json servlet output contains an update grid event i have to refresh grid content and to highlight the updated rows.

For my problem, the last row can be displayed only if I resize the grid panel. In this case the layout function is automatically call en launch the function "adjustVisibleRows".
May be a solution can be to call the function "adjustVisibleRows" when the scrollbar reach the grid bottom ? :(

Thanks for your help.

I'll see what I can do... however, there have been so many fixes (see changelog (http://wiki.ext-livegrid.com/browser/trunk/CHANGELOG)) that I'd really recommend to update to the latest version. Check your PM!

NicoP
16 Jan 2009, 8:29 AM
Hi,

I have found my error about the display of last grid row. I have modified loadRecords method in Store object :">
Also, I added those lines in store object to listen load store exception, and to fix a specific timeout parameter:

this.on('loadexception', function(obj, options, response, error) {
parseFailure(response);
}, this);

if(this.timeout) {
this.proxy.conn.timeout = this.timeout;
}

sureaintme
22 Jan 2009, 4:02 PM
Hello again, I have a livegrid inside Ext.BoxComponent and collapsible == true. The scenario is when i scroll the livegrid halfway and turn the BoxComponent collapsed then expand it again, the scroll move's back to top..

Any suggestions to make the scroll bar back into place? Thanks in advance.

Xenon,
I'm also having some similar problems. More specifically, I have my livegrid in an Ext.Panel with a border layout along with another Ext.Panel that expands and collapses. Whenever I expand or collapse, records at another index are displayed but the index # at the bottom of the page does not change, however dragging anyone of those records actually drags the records that should be there... very weird. Also scrolling up or down shows that only the records in view were affected.

If anyone has any insight on this that would be great, I've been looking for the root of the problem, but can't seem to find it or a solution.

ThorstenSuckow
22 Jan 2009, 4:13 PM
There is a method "_onExpand" in Ext.ux.grid.livegrid.GridView: It does only listen to the "expand" event for the Ext.ux.grid.livegrid.GridPanel which uses the GridView - i'd recommend to attach this listener to the "expand"-event of the Panel which holds the GridPanel (which in turn holds the GridView ;) ).

HTH!

i.e.


myBoxComponentOrPanelThatHoldsTheGridPanel.on('expand', livegridPanel.view._onExpand, livegridPanel.view);

cyfl
29 Jan 2009, 2:14 AM
Hello !

I have a small question !
where i can find a mini-project sample. :-/

this plugins is the answers of my problems !!!!
help me ! :D

ThorstenSuckow
29 Jan 2009, 2:16 AM
Hello !

I have a small question !
where i can find a mini-project sample. :-/

this plugins is the answers of my problems !!!!
help me ! :D

Either visit http://www.siteartwork.de/livegrid_demo/ or download and install conjoon (http://www.conjoon.org), which utilizes the Ext.ux.Livegrid in various ways.

cyfl
29 Jan 2009, 2:21 AM
thanks !!!

RWaters
30 Jan 2009, 9:28 AM
Seems odd to me to include extensions of GridPanel and EditorGridPanel and not give them xtypes.



Ext.reg('livegrid', Ext.ux.grid.livegrid.GridPanel);
Ext.reg('editorlivegrid', Ext.ux.grid.livegrid.EditorGridPanel);

ThorstenSuckow
30 Jan 2009, 9:30 AM
Seems odd to me to include extensions of GridPanel and EditorGridPanel and not give them xtypes.



Ext.reg('livegrid', Ext.ux.grid.livegrid.GridPanel);
Ext.reg('editorlivegrid', Ext.ux.grid.livegrid.EditorGridPanel);


Well, it's a user extension, so I thought it'd be better to not mess around with xtypes as it may clash with other extensions loaded into the namespace.

Could become a build-option, though, as I'm planning to upgrade the build-tools to use phing instead of shell scripts.

nctag
1 Feb 2009, 9:32 AM
For me it's okay. I have registered the xtypes by my own because I need them. Don't make much work for that little discussion point. Better keep on working on the really interesting and important features ;-).

charak
1 Feb 2009, 9:40 AM
Hi,
looks like it is a great work.
I dont know whether it is a correct place to put this question.
But can you help me to know how to get started using livegrid?
or link me any api documentation.

micgala
2 Feb 2009, 3:02 AM
Hi David,

grouping is planned but there is no date scheduled yet.

Hi. This was said on may, 2008.

Do we have any news on this? Will grouping be also possible someday?

Thanks for replying!
Michel.

charak
2 Feb 2009, 4:33 AM
Is there any api or some example available referring to which i can start using
livegrid.
Please Help.

NicoP
2 Feb 2009, 8:26 AM
Hi,

I need to refresh grid contents without a reset of the vertical scrollbar position. So I cannot use the default function: grid.getView().reset();

I found a solution but I am not sure this the best one :)

1/ I call updateLiveRows function like this:


grid.getView().activeHighlight=true;
grid.getView().updateLiveRows(grid.getView().lastRowIndex,false,true);
setTimeout(
function(){
grid.getView().activeHighlight=false;
},2500
);2/ Into the function "init" of the GridView object I have added this listener:


this.ds.on('load', this.refreshCurrentRows, this);So when "updateLiveRows" function has finished to load data from server this listener is called.

The method refreshCurrentRows contents the following code:


refreshCurrentRows : function(obj, records, options) {
if(this.activeHighlight) {
this.replaceLiveRows(this.lastRowIndex,true);
}
}3/ I also use the boolean "this.activeHighlight" as a flag to allow display highligth rows in the method "GridView.processRows" for instance:


...
if (paintSelections == true) {
//modified for real-time events
var highlightFlag = Ext.ux.grid.RT_EVENT_NONE;
try {
if (this.activeHighlight && this.grid.store.highlight != null) {
var calc = index - this.grid.store.bufferRange[0];
if (this.grid.store.data.items[calc] != null) {
highlightFlag = this.grid.store.data.items[calc].data[this.grid.store.highlight];
//reset flag value to prevent multiple refresh
this.grid.store.data.items[calc].data[this.grid.store.highlight] = Ext.ux.grid.RT_EVENT_NONE;
}
}
} catch (ex) {}
if (highlightFlag > Ext.ux.grid.RT_EVENT_DELETE) {
// row updated
var color = Ext.ux.grid.COLOR_UPDATE;
// row inserted
if (highlightFlag == Ext.ux.grid.RT_EVENT_INSERT) {
color = Ext.ux.grid.COLOR_INSERT;
}
this.removeRowClass(i, "x-grid3-row-selected");
this.fly(row).highlight(color, {
"duration" : 2.00
});
} else {
if (this.grid.selModel.bufferedSelections[index] === true) {
this.addRowClass(i, "x-grid3-row-selected");
} else {
this.removeRowClass(i, "x-grid3-row-selected");
}
}
this.fly(row).removeClass("x-grid3-row-over");
}
...This method works fine : the grid refresh the current content and the updated rows are well "highlighted".
However I notice that the grid content is not well refreshed if the grid contains in a first state 0 row and after refresh contains several rows. In this case I have to call view.reset();

To resume,
Step 1: call grid.getView().updateLiveRows(grid.getView().lastRowIndex,false,true); in order to load new data from server
Step 2: call grid.getView().replaceLiveRows(grid.getView().lastRowIndex,true); in order to refresh current grid content

But is there a better way to refresh the current grid content?

Thanks

micgala
4 Feb 2009, 8:38 AM
Hi. I need to override the behavior when trying to sort data of the store....

What is the the method of the "BufferedStore" being called when clicking on the Grid header for sorting?

Is it sortData : function(f, direction)?

Thanks,
Michel.

NicoP
6 Feb 2009, 7:17 AM
This method works fine : the grid refresh the current content and the updated rows are well "highlighted".
However I notice that the grid content is not well refreshed if the grid contains in a first state 0 row and after refresh contains several rows. In this case I have to call view.reset();


I found the origin of this problem. The view must be reset at least one time. So, if I call reset function just before update live rows the grid content is well refreshed, keeping the current scroll position:


this.refresh(true);
this.replaceLiveRows(this.lastRowIndex,true);

NicoP
6 Feb 2009, 7:23 AM
Hi. I need to override the behavior when trying to sort data of the store....

What is the the method of the "BufferedStore" being called when clicking on the Grid header for sorting?

Is it sortData : function(f, direction)?

Thanks,
Michel.

I put a break point on the function "sortData" in the DataStore object but this function is never call...
However, with the live grid, data are sorted on the server side. Four parameters are commited to the url :
- dir
- limit
- sort
- start

sksoft
5 Mar 2009, 12:19 AM
Did anybody find a solution for using RowExpander pluging? It was alredy pointed out (http://extjs.com/forum/showthread.php?p=117439&highlight=RowExpander#post117439) in this thread. I can remind the source of the problem:
RowExpander changes a row's height, and live grid expects all the rows to be the same height and performs calculations on the given uniform row height.I'll be very grateful for any suggestions.

epoks
6 Mar 2009, 3:30 AM
Hi MindPatterns,

A release managing rowexpander is planned ?

Thx
Epoks

supercharge2
19 Mar 2009, 8:13 AM
I have a livegrid in one tab (works amazingly), and if the user double clicks a record it opens a details tab. On the details tab I provide selectPrevious()/selectNext() buttons. These fill in the details from reading the selected record off the livegrid which is now in an inactive tab. This actually all works great except for when I reach the end of the specified buffer. I have to, at this point, go back to the livegrid tab and click the scroll bar to fetch the next buffer fill. Is there a way to fire the next/previous buffer fill from the details tab so I can continue forward/back? If so, when I get back to the livegrid tab I could just focus()/select() row to update its position visually. Thank you for your assistance.

NicoP
19 Mar 2009, 8:37 AM
I have a livegrid in one tab (works amazingly), and if the user double clicks a record it opens a details tab. On the details tab I provide selectPrevious()/selectNext() buttons. These fill in the details from reading the selected record off the livegrid which is now in an inactive tab. This actually all works great except for when I reach the end of the specified buffer. I have to, at this point, go back to the livegrid tab and click the scroll bar to fetch the next buffer fill. Is there a way to fire the next/previous buffer fill from the details tab so I can continue forward/back? If so, when I get back to the livegrid tab I could just focus()/select() row to update its position visually. Thank you for your assistance.

I am not if it will solve your problem but when I change of tabPanel I have to ajust the LiveGrid scroll position like this:


grid.getView().adjustScrollerPos(grid.getView().rowHeight * grid.getView().rowIndex, true);

supercharge2
19 Mar 2009, 11:03 AM
I am not if it will solve your problem but when I change of tabPanel I have to ajust the LiveGrid scroll position like this:


grid.getView().adjustScrollerPos(grid.getView().rowHeight * grid.getView().rowIndex, true);

Thanks for the reply, I will try using that for when I come back to the livegrid tab. Hopefully someone knows if its possible to fill the buffer from from my details tab buttons without having to switch back to the livegrid tab.

aj3423
25 Mar 2009, 6:52 PM
what's the difference between
store.autoLoad : true or not?
if the 'autoLoad' property is not specified or set to 'false' , and I manually load the store by store.load(), it causes an error
'uncaught exception: Index or size is negative or greater than the allowed amount (NS_ERROR_DOM_INDEX_SIZE_ERR)'
see this thread: http://extjs.com/forum/showthread.php?p=308427#post308427

NicoP
26 Mar 2009, 4:26 AM
what's the difference between
store.autoLoad : true or not?
if the 'autoLoad' property is not specified or set to 'false' , and I manually load the store by store.load(), it causes an error
'uncaught exception: Index or size is negative or greater than the allowed amount (NS_ERROR_DOM_INDEX_SIZE_ERR)'
see this thread: http://extjs.com/forum/showthread.php?p=308427#post308427

I often get this error when I scroll the grid quickly.

Also, I call "load()" function only when the grid is rendered :


myGrid.on('render', function() {
myGrid.getStore().load();
});

Markus
26 Mar 2009, 10:13 AM
Hi all, as a serious noob here, how would I display the livegrid in the desktop demo for example. Not to open up straight away but on a button click. I would want the client to be able to pick which grid to show as I have approx 1M + records in different lists, not all in the same lists.

This place just rocks!

Thanks

Markus

nctag
5 Apr 2009, 11:26 PM
For those who are trying to adjust the scroller at the right position after reloading data, here is my version:

Instead of

cmp.getStore().reload();

use

cmp.view.updateLiveRows( cmp.view.lastIndex, true, true );

seems to be a very easy way. Would be exzellent if someone would give me feedback.

HTH

NicoP
6 Apr 2009, 3:34 AM
For those who are trying to adjust the scroller at the right position after reloading data, here is my version:

Instead of

cmp.getStore().reload();use

cmp.view.updateLiveRows( cmp.view.lastIndex, true, true );seems to be a very easy way. Would be exzellent if someone would give me feedback.

HTH

Hi,
I also use "updateLiveRows" function to reload data and keep vertical scroll position, see this post : http://extjs.com/forum/showthread.php?p=281825#post281825

tenthcup
6 Apr 2009, 5:00 AM
I can't drag scroll bar to any position of the grid in IE6.

NicoP
6 Apr 2009, 5:06 AM
May be the livegrid css is missing...

tenthcup
6 Apr 2009, 7:45 PM
It doesn't work on Demo Web site (http://www.siteartwork.de/livegrid_demo/) by using IE 6. But it works under firefox.

James Wang
9 Apr 2009, 6:37 AM
Hi all,

Is it possible to have the GridView using cache instead of buffering?
that way the store could accumulate the data into the cache each time
it requests server to get more data, it would avoid re-getting the data when
scrolling the grid up.

Regards.
James Wang.

aleister999
16 Apr 2009, 11:31 AM
Hello!!!! I hope this hasn't been answered yet, I searched on the forums and Google but didn't find a thing. I'm having an Issue when inserting and modifying rows. The issue was, well, predictable.

When scrolling through my livegrid, inserted rows disappear and modified ones just go back to normal. Given the behavior of the Livegrid, I imagined that would happen as one of my app requirements is that all deletes, inserts and updates aren't commited to the database till approved (let's say, on a submit button click). So every time it scrolls and fetches the data from the database there's obviously no modified or updated data.

I keep JS arrays for each of these, with all updated and modified rows, but I don't know when to repaint the changes to the grid, or if there is a way that livegrid already handles this kind of behavior.

Up to now I have come to this (removing the working parts):



var inserts = new Array();
grid.getStore().on('load', agregaInserts);
function agregaInserts(){
for(var i =0; i < inserts.length; i++){
var rec =new Ext.data.Record({
id: inserts[i].data.id,
idTipoTrans: inserts[i].data.idTipoTrans,
descrTipoTrans: inserts[i].data.descrTipoTrans
});
store.insert(inserts[i].data.id,rec);
}
}


"inserts" is the array where i keep all insert operations, and the elements are Ext.data.Record which are the same I insert to the grid:



function agregaNuevo(registro){
var ind = store.findInsertIndex(registro);
store.insert(ind, registro);
}
var insert = function(){
var rec = new Ext.data.Record({
id: (store.getTotalCount() + 1),
idTipoTrans: '#',
descrTipoTrans: 'something'
});
agregaNuevo(rec);
inserts.push(rec);
};


This seems to work (the Row Total does show the inserted rows), but when i try to scroll to the bottom to see my inserted records, I get a JS error saying "id" is null or not an object.

For updating the grid view of modified data I overrid getRowClass so it checks if the registry id is on the Array i keep for modified data. If it finds it, then it changes the value. Funny thing this works well, but sometimes it doesn't change the value for the new one!

I'm on IE6 by the way and browser change is not possible . But I checked it in FF3 and the same applies). I really hope you can help me with this as I'm getting frustrated.

ThorstenSuckow
16 Apr 2009, 3:26 PM
Hello!!!! I hope this hasn't been answered yet, I searched on the forums and Google but didn't find a thing. I'm having an Issue when inserting and modifying rows. The issue was, well, predictable.

When scrolling through my livegrid, inserted rows disappear and modified ones just go back to normal. Given the behavior of the Livegrid, I imagined that would happen as one of my app requirements is that all deletes, inserts and updates aren't commited to the database till approved (let's say, on a submit button click). So every time it scrolls and fetches the data from the database there's obviously no modified or updated data.

I keep JS arrays for each of these, with all updated and modified rows, but I don't know when to repaint the changes to the grid, or if there is a way that livegrid already handles this kind of behavior.

Up to now I have come to this (removing the working parts):



var inserts = new Array();
grid.getStore().on('load', agregaInserts);
function agregaInserts(){
for(var i =0; i < inserts.length; i++){
var rec =new Ext.data.Record({
id: inserts[i].data.id,
idTipoTrans: inserts[i].data.idTipoTrans,
descrTipoTrans: inserts[i].data.descrTipoTrans
});
store.insert(inserts[i].data.id,rec);
}
}


"inserts" is the array where i keep all insert operations, and the elements are Ext.data.Record which are the same I insert to the grid:



function agregaNuevo(registro){
var ind = store.findInsertIndex(registro);
store.insert(ind, registro);
}
var insert = function(){
var rec = new Ext.data.Record({
id: (store.getTotalCount() + 1),
idTipoTrans: '#',
descrTipoTrans: 'something'
});
agregaNuevo(rec);
inserts.push(rec);
};


This seems to work (the Row Total does show the inserted rows), but when i try to scroll to the bottom to see my inserted records, I get a JS error saying "id" is null or not an object.

For updating the grid view of modified data I overrid getRowClass so it checks if the registry id is on the Array i keep for modified data. If it finds it, then it changes the value. Funny thing this works well, but sometimes it doesn't change the value for the new one!

I'm on IE6 by the way and browser change is not possible . But I checked it in FF3 and the same applies). I really hope you can help me with this as I'm getting frustrated.

I do not want to nitpick and it may not be related to the error you are getting, but I'm curious about the record type you have defined for the grid -you know, the one you pass to the data reader so it know what fields/field types are available in the record.

From the Ext docs (2.2.1):


Ext.data.Record( Array data, [Object id] )
This constructor should not be used to create Record objects. Instead, use the constructor generated by create. The parameters are the same.

aleister999
16 Apr 2009, 5:00 PM
Done!!! I attached the js to this post.

I hadn't seen this error. But now when selecting multiple (many rows!) with shift+click and scrolling down for the first time, the selection model doesn't return all the selected ones. But If I scroll up again so it loads them all again, it doesn't happen anymore :S

I also don't know if this is relevant but in my java class for the struts action I obtain the callback parameter to add it to the json string. But as I said, this works perfectly.

And this is the record:




var tTrans = Ext.data.Record.create([{

name:'idTipoTrans',


mapping:'idTipoTrans',

type:'int'

},{



name:'descrTipoTrans',


mapping:'descrTipoTrans'

}]);


I keep both name and mapping just in case I change the name :)




No prob :) I'll post it tomorrow.. sorry that i can't now, I have to leave in a hurry.
Thing is, on initial load and paging, all goes very well, it works very fast and loads rows correctly.
Another error I had at the beginning was the rows switched places and sometimes simply disappeared if I had autoLoad = true, when I switched it to false and did the first load by clicking in the refresh button, it never happened again.
BTW I'm obtaining a JSON String using a dataproxy calling a Struts action. I'll attach full .JS tomorrow :D

cybertaz
25 Apr 2009, 8:26 PM
Is it possible to use Grouping with the LiveGrid? if not yet ... is it scheduled for implementation ... or it will never be implemented? Thank you.

adamli
29 Apr 2009, 1:08 AM
How can I realise that all the columns in the Livegrid after resize are adapted to new
grid size (all the column proportionally) like in normal grid ?

Many thanks for response

PCBingoB
30 Apr 2009, 10:00 AM
First off, amazing work! Without livegrid, our customers wouldn't have let us continue with ExtJS.

Second, just wanted to add my voice to those asking about grouping. . .we have grouping in one area of our application where smaller result sets are returned, and it would be even more valuable with larger result sets where livegrid is necessary.

Thanks!!

Bingo

excelsis
1 May 2009, 7:26 AM
updateLiveRows called ds.suspendEvents() so that the predictive buffering is a "silent" background prcoess - this I understand to be the design and intent.

However, the ds.resumeEvent call is made directly after the ds.load call.
Since the load method is async it returns before the data is acquired - which means that the beforeLoad event is suspended but not the load event.
Was this the intention?

My personal requirements are for all store events to be suspended so I have moved the resumeevents call into the liveBufferUpdate (there are no conflicts with other calls and it simply sets a boolean flag so it has no penalty in being called needlessly).

Comments?

ThorstenSuckow
2 May 2009, 3:02 AM
The component has been updated to work with the latest revision from the Ext 3.0 trunk - note, that due to changes, the livegrid version in the branch does not work flawlessly with the official Ext 3.0 RC1 download!

You can find the branch at
svn://svn.ext-livegrid.com/branches/Ext3.0/trunk (anonymous svn checkout granted - see http://wiki.ext-livegrid.com/wiki/User/Download/SVN).

ThorstenSuckow
2 May 2009, 3:16 AM
updateLiveRows called ds.suspendEvents() so that the predictive buffering is a "silent" background prcoess - this I understand to be the design and intent.

However, the ds.resumeEvent call is made directly after the ds.load call.
Since the load method is async it returns before the data is acquired - which means that the beforeLoad event is suspended but not the load event.
Was this the intention?

My personal requirements are for all store events to be suspended so I have moved the resumeevents call into the liveBufferUpdate (there are no conflicts with other calls and it simply sets a boolean flag so it has no penalty in being called needlessly).

Comments?

Thanks for the hint - the intention was to use a callback instead of the load-event - it's an old fragment where I assumed that the load-event never gets fired IF a buffer event occurs AND a callback was supplied. I'll fix this in one of the next versions.

Edit: Resolved in trunk and ext 3.0 branch

jmaisel
7 May 2009, 2:19 PM
Hey....

I'm having an issue with the Live Grid. I've copied and pasted the example page code pretty much verbatim, but when I spawn the window containing the grid, the grid appears to fetch the data, then resize itself incorrectly in the windows viewport.

Please see attached image.

I'm on ext 2.2.1
Firefox 3.0
Ubuntu

Here's my html code:



<html>

<head>
<title>Ext.ux.Livegrid (Ext JS 2.2 user extension)</title>

<link rel="stylesheet" type="text/css" href="/bento/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="/bento/ext/adapter/ext/ext-core.cjs"></script>
<script type="text/javascript" src="/bento/ext/ext-all-debug.cjs"></script>

<!-- needed files for the ux -->
<link rel="stylesheet" type="text/css" href="jsSrc/ext/ux/grid/livegrid/resources/css/ext-ux-livegrid.css"/>

<script type="text/javascript" src="jsSrc/ext/ux/grid/livegrid/GridPanel.cjs"></script>
<script type="text/javascript" src="jsSrc/ext/ux/grid/livegrid/GridView.cjs"></script>
<script type="text/javascript" src="jsSrc/ext/ux/grid/livegrid/RowSelectionModel.cjs"></script>

<script type="text/javascript" src="jsSrc/ext/ux/grid/livegrid/Store.cjs"></script>
<script type="text/javascript" src="jsSrc/ext/ux/grid/livegrid/Toolbar.cjs"></script>
<script type="text/javascript" src="jsSrc/ext/ux/grid/livegrid/JsonReader.cjs"></script>

</head>

<body>

<div style="padding-top:40px;">
<input type="button" onclick="showMe()" value="Open up the grid example" />

</div>

<div id="content" style="position: absolute; top: 200px; left: 250px;">

</div>


<script type="text/javascript">

Ext.namespace('Ext.ux');

Ext.ux.Livegrid = Ext.extend(Ext.ux.grid.livegrid.GridPanel, {

initComponent : function()
{
/**
* BufferedJsonReader derives from Ext.data.JsonReader and allows to pass
* a version value representing the current state of the underlying data
* repository.
* Version handling on server side is totally up to the user. The version
* property should change whenever a record gets added or deleted on the server
* side, so the store can be notified of changes between the previous and current
* request. If the store notices a version change, it will fire the version change
* event. Speaking of data integrity: If there are any selections pending,
* the user can react to this event and cancel all pending selections.
*/
var bufferedReader = new Ext.ux.grid.livegrid.JsonReader(
{
root : 'response.value.items',
versionProperty : 'response.value.version',
totalProperty : 'response.value.total_count',
id : 'id'
},
[
{name : 'number_field', sortType : 'int'},
{name : 'string_field', sortType : 'string'},
{name : 'date_field', sortType : 'int'}
]
);

/**
* Set up your store.
* An instance of BufferedJsonReader is needed if you want to listen to
* <tt>versionchange</tt> events.
* Make sure you set the config option bufferSize high enough
* (something between 100 and 300 works good).
*/
this.store = new Ext.ux.grid.livegrid.Store({
autoLoad : true,
bufferSize : 300,
reader : bufferedReader,
sortInfo : {field: 'number_field', direction: 'ASC'},
url : '/bento/grid-data.jsp'
});

/**
* BufferedRowSelectionModel introduces a different selection model and a
* new <tt>selectiondirty</tt> event.
* You can keep selections between <b>all</bb> ranges in the grid; records which
* are currently in the buffer and are selected will be added to the selection
* model as usual. Rows representing records <b>not</b> loaded in the current
* buffer will be marked using a predictive index when selected.
* Selected rows will be successively read into the selection store
* upon scrolling through the view. However, if any records get added or removed,
* and selection ranges are pending, the selectiondirty event will be triggered.
* It is up to the user to either clear the pending selections or continue
* with requesting the pending selection records from the data repository.
* To put the whole matter in a nutshell: Selected rows which represent records
* <b>not</b> in the current data store will be identified by their assumed
* index in the data repository, and <b>not</b> by their id property.
* Events such as <tt>versionchange</tt> or <tt>selectiondirty</tt>
* can help in telling if their positions in the data repository changed.
*/
this.selModel = new Ext.ux.grid.livegrid.RowSelectionModel();

/**
* Here is where the magic happens: BufferedGridView. The nearLimit
* is a parameter for the predictive fetch algorithm within the view.
* If your bufferSize is small, set this to a value around a third or a quarter
* of the store's bufferSize (e.g. a value of 25 for a bufferSize of 100;
* a value of 100 for a bufferSize of 300).
* The loadMask is optional but should be used to provide some visual feedback
* for the user when the store buffers (the loadMask from the GridPanel
* will only be used for initial loading, sorting and reloading).
*/
this.view = new Ext.ux.grid.livegrid.GridView({
nearLimit : 100,
loadMask : {msg : 'Please wait...'}
});

/**
* You can use an instance of BufferedGridToolbar for keeping track of the
* current scroll position. It also gives you a refresh button and a loading
* image that gets activated when the store buffers.
* ...Yeah, I pretty much stole this one from the PagingToolbar!
*/
this.bbar = new Ext.ux.grid.livegrid.Toolbar({
view : this.view,
displayInfo : true
});

Ext.ux.Livegrid.superclass.initComponent.call(this);
}

});

function showMe()
{
var grid = new Ext.ux.Livegrid({
enableDragDrop : false,
cm : new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header : '#' }),
{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'
});

var w = new Ext.Window({
title : 'Ext.ux.Livegrid',
maximizable : true,
renderTo : 'content',
resizable : true,
layout : 'fit',
items : [grid],
width : 500,
height : 400
});

w.show();
}

</script>

</body>
</html>

here's a sample from my hard coded jsp (copied and pasted from the live grid demo page).

{"response":{"value":{"items":[{"id":"1","number_field":"0","string_field":"A","date_field":"1972-05-20 22:49:03"},{"id":"2","number_field":"1","string_field":"B","date_field":"2007-07-29 00:01:55"},{"id":"3","number_field":"2","string_field":"C","date_field":"1971-07-01 00:46:13"},{"id":"4","number_field":"3","string_field":"D","date_field":"1978-01-15 12:07:04"},{"id":"5","number_field":"4","string_field":"E","date_field":"1976-04-12 21:11:17"},{"id":"6","number_field":"5","string_field":"F","date_field":"1970-10-27 04:16:47"},{"id":"7","number_field":"6","string_field":"G","date_field":"1999-08-10 12:03:48"},{"id":"8","number_field":"7","string_field":"H","date_field":"1987-07-16 03:48:15"},

// etc.

thanks in advance for any insight you can provide. :D
file:///tmp/moz-screenshot.jpgfile:///tmp/moz-screenshot-1.jpg