View Full Version : I apologize in advance for breaking your code... (Grid 2.0)

3 Jan 2007, 6:45 AM
Grid 2 is well underway and the UI is a complete rewrite from scratch. :shock: The entire rendering process is template based and rendering large grids (including lots of columns) has noticably improved. Column resizing with more than 10 columns is now now very reasonable.

Some new concepts are also being used. The grid no longer maintains references to row Dom elements. This means a refresh of all the rows, headers and splitters is now an option. The splitbars were replaced with a dragzone implementation.

You might be asking "wtf?". Over the last few days I have been asking myself the same question many times. ;) Other than performance improvements, there are other things to look forward to.


Drag and drop column reordering is implemented and working.


Locked columns (left side only) is implemented (what a pain in the ...).


Built in toolbar support, top and bottom.


Auto height rows, wrapped text and images now fully supported. Unfortunately syncing between locked and normal rows is impossible so locked columns = no auto height rows.


A new drag and drop implementation is in the works. Column locking totally destroyed the old one.


Column id attribute for columns (defaults to it's index). This means you can set css for the column by id instead of index:

#my-grid .ext-grid-col-account{ text-align: right; background: red;}


DataModel columns by name instead of index is partially implemented. Yes, I listen to you guys. ;)

This also includes binding grid columns to named fields via dataIndex. e.g.

var cm = new Ext.grid.ColumnModel([
{header: 'Title', dataIndex: 'title'} // bound to title data column


All renders now receive an object that becomes the dom helper template parameter and allows you to add classes to the cells instead of having to use inline tags. That means the renderer params have changed. e.g. instead of:

function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
return val;

you can do:

function change(val, o){
if(val > 0){
o.css = 'green-cell';
}else if(val < 0){
o.css = 'red-cell';
return val;

Not only does it clean up the code, but it should also speed up rendering performance. Oh yeah, it also allows you to add background colors to cells easily. The real power is exposed when you tweak the cell template and create your own parameters. :)


Doing all this backwards compatible was impossible. Trust me I tried. So I apologize for breaking your code in advance, but I think in the long run it will turn out to be a good thing.

I will be making a manual page for the transition.


3 Jan 2007, 8:02 AM
I normally dont like it when backward compatibilty is broken but I think this was a good call.

Unfortunately syncing between locked and normal rows is impossible so locked columns = no auto height rows.

It's possible but involves rerendering the locked column table after the slave table has been rendered and using the row heights from the slave table during the locked column rerender. This typically needs to be done in body onload or on a defered script and doesnt doesnt perform great for large tables (eg >100 rows, 10 columns ) but is not noticible for smaller ones.


4 Jan 2007, 2:58 AM
Nice new features!! But does this mean that the planned forms functions (validations, etc.) are delayed?



4 Jan 2007, 3:33 AM
Hi Jack,

When is Grid 2.0 to be released? Can you give a rough estimation?

4 Jan 2007, 6:05 PM
Just a suggestion:

- Built-in support for hide/show of grid rows (with alternating background color style re-assigned where applicable).

4 Jan 2007, 11:55 PM
Ouch!!! ..... it would be a stinger to change all the code I have done on grid.... but I guess I can live with that :wink: ..... nice new features Jack...... waiting eagerly

5 Jan 2007, 7:43 AM
Is this to be released in .40 or .40+ ?

5 Jan 2007, 9:33 AM
.40. I don't have a date yet. There's still a lot to do. Once the grid code stabilizes I will be plopping it into SVN and breaking everyone stuff.

FYI, the XmlDataModel now supports basic xpath. I wrote a yui-ext selector/xpath implementation that is bad ass. I will be blogging about it shortly. :)

5 Jan 2007, 9:54 AM
And how about the forms stuff? Any progress on those features?


5 Jan 2007, 9:56 AM
No. I haven't worked on them at all. Soon though... ;)

6 Jan 2007, 7:49 PM
Great news!
One suggestion: it would be nice if the values for all of the fields can be accessed inside the Renderer methods. So instead of
Render(value, domobject)
Render(value, arrayOfThisRowsFieldValues, domobject)
or maybe even
Render(columnid, arraoyOfThisRowsFieldValues, domobject)
This is because sometimes when rendering the data for a column, it may need data from another column.
Ex. I want to render the name column as an http link which the url requires the data in the "id" column.

6 Jan 2007, 7:59 PM
Glassy, the full renderer parameter list is:

value, domObj, rowIndex, colIndex, dm

You could get the value for another cell by calling dm.getValueAt(rowIndex, yourOtherIndex);

Since some will want another rows data, some will want other cell data, I figured it was better to just pass the whole dm. Granted, it is pretty deep on the parameter list. ;)

7 Jan 2007, 1:43 AM
Glassy, the full renderer parameter list is:

value, domObj, rowIndex, colIndex, dm

That's perfect! :)

10 Jan 2007, 9:03 AM
doh! this was precisely the component i was going to start with...
jack, not sure if it already has it, but if grid doesn't already include a stable sort, 2.0 is a good time to add this as a default feature (or configurable via constructor).

you rock, thanks for your work.

10 Jan 2007, 10:55 AM
Just when I had gotten a hang of Grid ... but onwards and upwards; some of the new features some really useful. Good to hear about the speed improvements with large sets of data; I was finding grids with just 500 records were a bit slow to display. Being able to reset the headers is also useful for me so it's good to hear while at the same time a bit frustrating!

It really would be good to have a rough indication of when this will be released. I had just about finished making up a demo to show my boss (I was also going to post them here as well to help people who are getting started with the grid), but if Grid 2 is coming then it seems pointless.

This week, this month or can you really not say at this stage?

10 Jan 2007, 7:36 PM
I would hope this month. :) This week is definitely a no go though. 0.40 plans for forms has been revamped and it requires changes to some of the data classes. I figure I will get it done now so I break everyones code only once.

14 Jan 2007, 4:56 PM
Thanks very much for the advance warning Jack. I know it is hard when you get a lot of people relying on your work. It can feel like you're a prisioner of your own code!

Since the datagrid serves as the home base for a lot of my code, it would be great to know when that's hitting svn.

15 Jan 2007, 8:56 AM
Is the grid currently available on the SVR repository (revision 120) already the new Grid2, or is it still the original one?

I think it is the later, but I have not done anything fancy with the grids, so I could be very wrong.

15 Jan 2007, 11:38 AM
It's the original. I haven't submitted any code yet because many parts are still very broken.

23 Jan 2007, 3:53 PM
This sounds really, really good.

I am currently experimenting with the first grid version, however, the new features you described are exactly what i need.

Will the paging feature for long lists and a horicontal scroll functionality also make it into the new grid?
This would be really great.

23 Jan 2007, 9:15 PM
Hopefully the optimizations are as good as you say since I find adding rows to the current table rather slow...4-6+ seconds to add 15 rows with an average of ~200-300 milliseconds per row. The first few are fairly fast, ~70-80 milliseconds, but then it quickly goes up to ~200-300 millseconds.

That's for Firefox. For Opera (does anyone else notice a scrollbar appearing on the bottom randomly even though there's nothing to scroll?), it can vary greatly on each add from 40ms to 400ms. Usually lower though in the 40-160ms area. For Firefox, no such luck, it gets higher as you add more.

I'm supposing it's because you're using DOM right now for that. Hopefully templates speed it up.

Edit: Hmm, oddly IE7 scores the best. ~40-100ms per row consistently, averaging around 60ms.

Edit2: The (undocumented) addRows function seems to be a lot faster than adding single rows.

26 Jan 2007, 10:04 AM
Jack -

As usual, quite impressive work! As we near the end of January I was wondering if you had a better feeling for the timeline of the grid's release? Earlier this month you said you thought it would be in Jan. I am considering using the grid for a new project and would like to start off w/ grid v2 but just want to make sure it falls inline w/ my project deadline


26 Jan 2007, 11:20 AM
I am in the same position as aconran, I also have a serious new project on the way and need to start now. Using grid2 from the start on would be great, as there are UI requirements that demand some of its features.

A hint whether grid2 will make it in January would be awesome :-)

26 Jan 2007, 11:34 AM
Hey, I'm anxiously awaiting the introduction of the new Grid as well. So far, I've used the CSS features of YUI only. :-)