View Full Version : Grid show/hide columns

23 Jan 2012, 10:00 PM
I have a grid that gets displayed from two different buttons (different types of search).

One of the search method requires two additional columns to be displayed in the grid. The latter requires them to be hidden.

This should be a simple, straightforward task (as it was in ExtJS 3.3), but now I have to write this code:

var isReassign = (b.tooltip === 'Reassign Leads');
if(grid.headerCt.gridDataColumns) { // has it been rendered yet?
} else {
grid.columns[3].hidden = !isReassign;
grid.columns[4].hidden = !isReassign;

I've tried using reconfigure() with the correct column configuration, but both of these solutions are extremely slow (we're talking 8-9 seconds on IE).

Is there a way I can show/hide columns using an algorithm similar to the one used in ExtJS 3.3? The show/hide was instantly completed.

(edit) I noticed there's a div (TextMetrics) that very rapidly generates and destroys child notes inside it after I show/hide the columns. Is it slow because the columns are all trying to recalculate whitespace inside all of the cells?

I found this, inside grid/ColumnLayout.js:

len = items.length;for (; i < len; i++) {


24 Jan 2012, 9:13 AM
Show/hide of a column in Ext JS grids for IE will cause a reflow. That could be expensive and slow. 4.1 is supposed to address this.

how many items are you rendering in the grid?

24 Jan 2012, 9:16 AM
Not many, really. Just a bottom toolbar.

I fixed it by destroying the grid and re-adding it to the parent. This seems to get calculated in 100ms, and it works wonderfully.

24 Jan 2012, 9:17 AM
wow. Ok. :-\ sounds more of a hack, but if it works ;)

5 Aug 2013, 11:07 AM
This is still really slow in IE using 4.2.1. I do not want to destroy and recreate the grid. This should be fixed in the toolkit.

5 Mar 2014, 3:12 AM
Is it fixed? At the moment it doesn't seem so. Sometimes it's embarassingly slow, even in Firefox.