PDA

View Full Version : How to hide multiple (Grouped) gridheaders efficiently?



JorisA
1 Jun 2014, 9:50 AM
I'm have a grid that has multiple views that the user can cycle through. The grid has a large number of grouped headers that get hidden/shown depending on the view.

It works when calling show/hide() on all of them one by one, but takes forever as the whole grid gets re-laid out for each of them.

I tried using Ext.suspendLayout(), but the show/hide function resumes it so thats no good. I also messed around with setting the hidden config and than calling various functions like grid.getView().refresh(). This is significantly faster, but they all mess up the grid somehow (data not aligned with headers etc.)

Here's a fiddle based on the grouped header example to show my point:
https://fiddle.sencha.com/#fiddle/68s

scottmartin
1 Jun 2014, 12:45 PM
I would highly recommend using reconfigure instead of hide/show. I several apps that have many grid views and hide/show is just too slow.

JorisA
1 Jun 2014, 10:25 PM
I tried that too, but it doesnt fully update the colum headers (I updated my fiddle).
grid.reconfigure(); properly hides the collumns, but doesnt update the header
grid.reconfigure(null, grid.columns); totally mashes things up.

scottmartin
2 Jun 2014, 6:52 AM
The idea here is to remove any code for hide/show and simply use grid.reconfigure to add the new columns.
You should use both store,columns for the method and not null.

scottmartin
2 Jun 2014, 9:31 AM
Here are a few quick examples:
https://fiddle.sencha.com/#fiddle/2r1
https://fiddle.sencha.com/#fiddle/492