Ext.ux.LiveGrid

[weazil]

With 3.1.x I noticed in livegrid suddenly my scrollbars aren't rendering correctly. When you first render the livegrid the last column on the right the scrollbar is covering part of the column, if you resize the grid after its been rendered it will auto resize with the viewport and render correctly.

curious if anyone else was experiencing this.

[emily]

Does anyone have a reliable solution for this issue, or this can't be fixed given the current implementation details?

I did hack the livegrid code to get around this issue, but I wouldn't say my solution is reliable (which is why I haven't posted it back!). Sometimes it renders a bit funny when you get to the bottom of the grid.

For my app (which is not for a wide audience, but more of a tool to be used by one or two people) it is fine, but I would be interested if anyone else has a better solution.

I have also noticed that with my implementation, when you instantiate a grid that has a small number of rows it doesn't render them until you resize / refresh the grid. I haven't managed to figure out if this is a problem with livegrid itself or was introduced by my nasty hacking.

Em

[calugaru.cristian]

After some looking through the source code, I abandoned changing it. I will just use some tip on mouse hover, so the user will be able to see the entire text..until maybe someone comes with a better approach.

I have another question, maybe someone needed the same functionality that I am required to implement now.
So, I have some keyboard shortcuts - control+alt+down arrow. When I am on a particular row, after pressing this shortcut, I need to go to the next row that has a particular property set to true.
So now, if I am in the situation of moving through pages(ie. buffering needed), how can I somehow catch the buffering event, and continue searching into the new values that I have in the store(given that the values from the store are changing when buffering occurs)? And this could perpetuate, until the end of the grid..
Can I somehow, search through the current values of the store, and, if I won't find my next row, I continue searching into the next page, only after it loaded, of course.

Thanks.

I did hack the livegrid code to get around this issue, but I wouldn't say my solution is reliable (which is why I haven't posted it back!). Sometimes it renders a bit funny when you get to the bottom of the grid.

For my app (which is not for a wide audience, but more of a tool to be used by one or two people) it is fine, but I would be interested if anyone else has a better solution.

I have also noticed that with my implementation, when you instantiate a grid that has a small number of rows it doesn't render them until you resize / refresh the grid. I haven't managed to figure out if this is a problem with livegrid itself or was introduced by my nasty hacking.

Em

[emily]

After some looking through the source code, I abandoned changing it. I will just use some tip on mouse hover, so the user will be able to see the entire text..until maybe someone comes with a better approach.

Yeah - I nearly gave up, but I needed the functionality (it is difficult to browse lots of data if you have to hover over each row) and didn't want to go back to paging because it isn't very user friendly.

I have another question, maybe someone needed the same functionality that I am required to implement now.
So, I have some keyboard shortcuts - control+alt+down arrow. When I am on a particular row, after pressing this shortcut, I need to go to the next row that has a particular property set to true.
So now, if I am in the situation of moving through pages(ie. buffering needed), how can I somehow catch the buffering event, and continue searching into the new values that I have in the store(given that the values from the store are changing when buffering occurs)? And this could perpetuate, until the end of the grid..
Can I somehow, search through the current values of the store, and, if I won't find my next row, I continue searching into the next page, only after it loaded, of course.

Would it not be better to do a serverside query to get the next value? Then if it is in the store, you can jump to it; if it isn't, you know what data you need to buffer so you can jump straight to it. Otherwise if the next row is near the end of the grid (a long way away) you will put the grid into a crazy loop of fetching each chunk of data until it finds it and it could take forever.

[calugaru.cristian]

Your suggestion really seems better. I just don't understand , when you are saying ' if it isn't, you know what data you need to buffer so you can jump straight to it'..how exactly can I programmatically jump to it, so that the view goes to the next one?
Let's say, I have data loaded from [0-100], in the form of {nextAvailable:234, data[...]}, so my next selectable row is somewhere at 245..that means that some buffering is needed to get to that. I somehow need to hook to the after-buffer event, if and only if I haven't found it in the [0-100] page?

Thank you so much for your replies

Yeah - I nearly gave up, but I needed the functionality (it is difficult to browse lots of data if you have to hover over each row) and didn't want to go back to paging because it isn't very user friendly.



Would it not be better to do a serverside query to get the next value? Then if it is in the store, you can jump to it; if it isn't, you know what data you need to buffer so you can jump straight to it. Otherwise if the next row is near the end of the grid (a long way away) you will put the grid into a crazy loop of fetching each chunk of data until it finds it and it could take forever.

[emily]

Your suggestion really seems better. I just don't understand , when you are saying ' if it isn't, you know what data you need to buffer so you can jump straight to it'..how exactly can I programmatically jump to it, so that the view goes to the next one?
Let's say, I have data loaded from [0-100], in the form of {nextAvailable:234, data[...]}, so my next selectable row is somewhere at 245..that means that some buffering is needed to get to that. I somehow need to hook to the after-buffer event, if and only if I haven't found it in the [0-100] page?

Thank you so much for your replies

I am by no means an expert so definitely take this with a pinch of salt (I looked at this ages ago not recently), but I would suggest looking at using the updateLiveRows method of the view. If you search for it in livegrid-all-debug.js and see if it does what you want. If you also search for 'helpers' there are some methods there that may help you to determine whether the row is in the existing data store too.

Not sure how much help that is.

Em

[calugaru.cristian]

Hi again.
So, I tried playing with the updateLiveRows, but I haven't managed to use it properly.
I added a button on my window, with a hard-coded call to , let's say, the 300th index in my data. I added the livegrid.Toolbar, an, when I press the button, it seems that the information from the toolbar is getting updated ('Displaying 300-399 of 2000'), the loadMask
is getting shown, and a correct call is made to the back-end (with the start param to 300).
But right after this one, another call is made with the former index(0 in my case), and
the same rows are getting re-displayed. I don't see why 2 calls are made when calling the method..

Did anyone have a requirement to jump around rows with the livegrid?

I am by no means an expert so definitely take this with a pinch of salt (I looked at this ages ago not recently), but I would suggest looking at using the updateLiveRows method of the view. If you search for it in livegrid-all-debug.js and see if it does what you want. If you also search for 'helpers' there are some methods there that may help you to determine whether the row is in the existing data store too.

Not sure how much help that is.

Em

[swang]

From the release announcement:

Ext.ux.Livegrid 0.4.1 is available!

The most notable change would be the treatment of the “liveScrollerInset”. In previous versions, this was a single “div” element, representing the scroll amount according to the number of records displayed by the Livegrid. This could lead to some issues in browsers which define a max height for HTML elements, making it impossible for users to scroll through all the records, as the max height of this inset would prevent scrolling beyond this point. We have now splitted this div into 3 single divs which resolves this issue.

There is also a change in Store.js - loading selections using the “selectionsProxy” would fail due to a call to a deprecated method which is no longer available since Ext 3.*.

Thanks for the scrollbar fix. But does this mean that the new limit is simply three times the old limit? I read the source code and it appears to be the case.

[meroy]

Tonight, I came across a problem with the LiveGrid user extension.

With IE 6 and clicking on the lower scroll icon in the scrollbar, the grid scrolls down by 2 or 3 rows. With Firefox 3.6, it's 0 or 1 row. This really takes away from the user friendliness of the grid in my humble opinion.

I'm expecting the grid to scroll down/up by one row when clicking on the scroll buttons in the vertical scrollbar.

It does appear to be working fine if I make the height of the entire browser window much smaller, but not always. This isn't a solution to the problem though.

It's almost a no go for me. I have spent some time looking at the source and I saw the 3 divs (pretty cool) for the scrollbar insets.

[meroy]

The make.sh file failed under SUSE Linux due to missing semicolon, missing $ for one of the variables, changed one ${tp} to ${TP}, and changed one \ to /. Also the cp failed and I changed it to use cat instead. Am posting here in the event that it may be helpful to others.

Ensure your JAVA environment is set up before executing the script.

#!/bin/bash
 
echo "-----------------------------------------------------"
echo "-----------------------------------------------------"
echo "               Ext.ux.Livegrid Build Tool            "
echo " (c) 2008 Thorsten Suckow-Homberg ts@siteartwork.de  "
echo "-----------------------------------------------------"
echo " Using yuicompressor:                                "
echo " http://developer.yahoo.com/yui/compressor/          "
echo "-----------------------------------------------------"
 
if [ -z "$1" ]; then
        echo "Usage: $0 [path to yuicompressor.jar]"
        echo "Example: $0 /temp/yuicompressor-2.4.jar"
        echo "Download yuicompressor at http://developer.yahoo.com/yui/compressor/"
else
        TP="../../"
        yuicompressor_path=$1
        livegrid_file_list_core="${TP}src/GridPanel.js ${TP}src/GridView.js ${TP}src/JsonReader.js ${TP}src/RowSelectionModel.js ${TP}src/Store.js"
        livegrid_file_list_all="${livegrid_file_list_core} ${TP}src/Toolbar.js ${TP}src/DragZone.js ${TP}src/EditorGridPanel.js"
 
        echo "...building CSS file..."
        java -jar ${yuicompressor_path} -o ${TP}build/resources/css/ext-ux-livegrid.css --charset UTF-8 ${TP}src/resources/css/ext-ux-livegrid.css
        echo "Done"
 
        echo "...merging files for livegrid-core.js..."
        cat ${livegrid_file_list_core} > ${TP}build/_tmp.js
 
        echo ...building livegrid-core.js file...
        java -jar ${yuicompressor_path} -o ${TP}build/livegrid-core.js --charset UTF-8 ${TP}build/_tmp.js
        echo "Done!"
 
        echo "...merging files for livegrid-all.js..."
        cat ${livegrid_file_list_all} > ${TP}build/_tmp.js
        echo "Done"
 
        echo "...building livegrid-all.js file..."
        java -jar ${yuicompressor_path} -o ${TP}build/livegrid-all.js --charset UTF-8 ${TP}build/_tmp.js
        echo "Done"
 
        echo "...merging files for livegrid-all-debug.js..."
        cat ${livegrid_file_list_all} > ${TP}build/livegrid-all-debug.js
        echo "Done"
 
#       echo "...building livegrid-debug-all.js file..."
#       java -jar ${yuicompressor_path} -o ${TP}build/livegrid-debug-all.js --nomunge --disable-optimizations --charset UTF-8 ${TP}build/_tmp.js
#       echo "Done"
 
        echo "...removing temp file..."
        rm -f ${TP}build/_tmp.js
        echo "FINISHED!"
fi