ExtJs Grid Rendering
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?
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.
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.
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).