ExtJs Grid Rendering

[extshrek]

I was going through FireBugg and inspecting ExtJS Grid and I was bit surprised of its DOM Style. Each Row in the Grid is a DIV and inside each DIV there is a table element. Why is such a complication. Is that only for the scrolling purpose?

What is the performance aspect of this rendering method? Wont it be very slow in a high traffic internet website?

[jay@moduscreate.com]

From my understanding, it has to do with 100% cross browser compatability with all of the grid features, such as column resizing, drag and drop, etc.

[jay@moduscreate.com]

traffic on a website is irreleveant. What is relevant is the amount of DOM required to render in the grid. It has a relatively low point for which pain can be felt.

Try 10 columns at 100 rows.

[Condor]

1. Stuff like grouping and row expanders would never work if the entire grid (except the header) was a single table.
2. Some browsers will modify the column widths of a multi-row table, even if you specify fixed widths. The only way to avoid this is to only use single-row tables.

ps. Animal wrote a TableGridView user extension that renders a GridPanel using only a single <table> (it does have some limitations as mentioned above).