0

Using extjs 4.1.1 I have a grid with lots of columns >20.

Initially, most of these columns are hidden.

If a user wants to unhide the column, they select the menu on any column, then select the "columns" choice, this expands another dropdown/dropout which shows all of the columns. Those with checkboxes next to them are shown.

My issue is this: The columns in the dropdown are shown in the order in which they are defined/displayed in the grid. The order in which they are displayed in the grid has been chosen for a good reason( e.g. id as the first column). However, when a user wants to display one of the hidden columns, it is hard for them to find it in the list. This is because the list is sorted in the order the columns are defined. I want to sort the column dropdown/dropout list in alphabetical order, without effecting the order of the columns in the grid.

How can this done?

Bbb
  • 271
  • 2
  • 8
  • 22
  • It appears that the grid ordering is tied directly to the column dropdown. Dragging a column in the grid changes the ordering in the dropdown... – Bbb Dec 28 '12 at 20:45

1 Answers1

3

I think I found the solution to your question.

First of all I don't have the Ext JS 4.1.1. framework on my current PC. So I tried to figure out you problem reading the Ext JS 4.1.3. documentation available on Sencha's site. But I don't think that they have made drastical changes in this part of the framework between the two minor releases so my solution should work in your case too. I have tried out my solution using JSFiddle. Unfortunately they did not have the 4.1.1. ext-all.css file, so I have linked manually the 4.0.2 file available at Sencha, so the menu is looking a bit missplaced.

The header menu and it's submenus are managed by the Ext.grid.header.Container class. The column submenu is constructed by the getColumnMenu method. The whole menu is purged and reconstructed on every drag and drop or other event which should affect the grid view. As a result it is enough to overwrite this method in order to solve the problem. Because the headercontainer class is too deep in the framework it is hard to extend it, so you have to make use of the Ext.base.override method.

The column submenu's menu items are created from the result of the

   items = headerContainer.query('>gridcolumn[hideable]')

query. So you have to first sort alphabetically the result, before creating the menu items. I have added to the class the sortColumns method which does all the sorting stuff.

So here is what I did: link to my solution.

I hope that this is what you were looking for.

Matyas Matyas
  • 141
  • 3
  • Not sure why this wasn't up-voted and marked as the answer, it's a fantastic solution and saved me loads of time. – BigBadOwl Jun 18 '14 at 09:16