View Full Version : GridPanel - buttons that toggle groups of columns on/off - very slow!

24 Mar 2011, 3:32 AM

I have a series of buttons in the toolbar of a GridPanel that correspond to a subset of columns. When a button is clicked, its subset of columns is made visible and the rest are hidden. However this code is very very slow... can someone tell me how to speed it up? With 20 rows of 50-ish columns, it takes around 10-15 seconds when half of the columns are toggled off.



The following handler is invoked when any of the buttons is pressed:

function toggleMiAttemptsSwitchViewButton(button, pressed) {
if(!pressed) {return;}

var grid = Netzke.page.microInjectionAttemptsWidget.grid;
columnModel = grid.getColumnModel();

var columnsToShow = MI_ATTEMPTS_VIEW_CONFIG[button.viewName];

for(var idx = 0; idx < columnModel.getColumnCount(); ++idx) {
var columnId = columnModel.getColumnId(idx);
if(columnsToShow.indexOf(columnId) == -1) {
columnModel.setHidden(idx, true);
} else {
columnModel.setHidden(idx, false);

MI_ATTEMPTS_VIEW_CONFIG is something resembling:

'foo': [
'bar': [
'everything': [

Each column in the GridPanel has an id corresponding to (in this example) 'foo1', 'foo2', etc. and each button is told which 'view' it will enable via the viewName attribute (i.e. 'foo' or 'bar' in the above example).

From profiling, it seems that there is an observer that shuffles cells around every time a cell in it's row is hidden or shown to meet the dimensional constraints of the grid..... perhaps there is a way of turning that observer off while the algorithm is running and just running it once at the end of the job?

Hope you can provide me with a better way of doing it!

Asfand Qazi

24 Mar 2011, 5:42 AM
My guess is that setHidden causes an update of the page or at least internal data. Which might cost lots of time. Have you tried calling each setHidden only if it really changes something?

24 Mar 2011, 6:22 AM
#one's right. Calling setHidden will fire a 'hiddenchange' event that, among other things is monitored by the grid and will call saveState(), update the total width, change the header styles, etc., etc.

I'd suggest delving into the code to see how you could *optimize* this.

24 Mar 2011, 7:51 AM
I've been profiling under Firefox/Firebug, and setHidden takes minimal time (0.27ms or something ridiculously small like that) if the state it requests is already set - e.g. hiding something already hidden. That's why I went with the decision to just call setHidden on everything; it is an irrelevant amount of time.

I think I will take the suggestion to read the Ext code.... I'll probably manually inline it all first, then optimize my heart out.

I wasn't expecting any replies to this, so thank you.

Asfand Qazi

24 Jan 2012, 8:29 AM
Hi, I am having the same problem and came to this thread by Google search. Did you come up with any solutions by looking into GXT codes?