View Full Version : Add/Remove hidden grid columns from the DOM

22 Sep 2011, 7:09 AM
Our team has implemented a large grid with edit capabilities (CellEditing plugin) that can contain a lot of columns (over 100).

We display only a few columns by default, but the user can choose to show however many they want.

We are seeing significant performance issues when loading 100-200 rows of data per page.

I.e. it takes the server 0.5 seconds to return all 200 rows, but over 8-10 seconds to actually render them.

We tried showing only 5 columns, but the rendering performance did not improve at all (in fact it got worse, but of course these times can fluctuate from one request to another).

So, looking at the DOM, we see that even the invisible columns are getting DOM elements--they're only being set to zero width or something like that.

This is what we'd like:

An editable grid that will take the hidden columns in and out of the DOM. I.e. show the list of columns available and bring them back in the DOM when visibility is changed from invisible to visible.

How can we implement this?
Can we get a property on the grid for the next release of ExtJS 4 that will handle this for us?