grid column header menu - sort columns alphabetically

[SunWuKung]

Hi,
In my grid I have many columns most of which are not shown by default.
When making a column visible it would be easier to find the column in the header menu if I could order the list alphabetically (I do not want to change the order in which they appear in the grid, just sort the column list).

Could somebody tell me how to do that?
Thanks for the help.
SWK

[stephen.friedrich]

See the code below.
I searched for "enableHdMenu" in the ext sources, found a reference in GridView to this.colMenu, then found the method beforeColMenuShow in which the column menu items are created.
You can always replace such a method with Ext.override.
You need to re-examine each overriden method whenever you upgrade ExtJS to a new version, though!
This is tested with ExtJS 3.2.2

    Ext.override(Ext.grid.GridView, {
                     beforeColMenuShow : function() {
                         // Copy necessary data for the column items to an array
                         var cm = this.cm,  colCount = cm.getColumnCount();
                         var sortedColumns = new Ext.util.MixedCollection();
                         for (var i = 0; i < colCount; i++) {
                             if (cm.config[i].hideable !== false) {
                                 var columnId = cm.getColumnId(i);
                                 sortedColumns.add(columnId,
                                                   {
                                                       id: columnId,
                                                       header: cm.getColumnHeader(i),
                                                       isHidden: cm.isHidden(i)
                                                   });
                             }
                         }
                         // Sort the column data by column header texts
                         sortedColumns.sort('ASC',
                                            function(a, b){
                                                var headerA = a.header.toLocaleLowerCase();
                                                var headerB = b.header.toLocaleLowerCase();
                                                return headerA.localeCompare(headerB)
                                            });

                         this.colMenu.removeAll();

                         // finally create the menu items from the sorted column data
                         sortedColumns.each(function(columnData) {
                             this.colMenu.add(new Ext.menu.CheckItem({
                                                                         itemId: 'col-' + columnData.id,
                                                                         text: columnData.header,
                                                                         checked: !columnData.isHidden,
                                                                         hideOnClick:false
                                                                     }));
                         }, this);
                     }

                 }); 

[SunWuKung]

wow,
many thanks for this, I will try it when I return after Eastern.

Thanks again.
SWK

[SunWuKung]

hi,
this works for me with Ext 3.4

I have added a short function to handle accented characters better (for my purpose).

String.prototype.strip = function() {
  var translate_re = /[ŠšĐđŽžČčĆćÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûýýþÿŔŕüÜűőŐŰ]/g;
  var translate = {
    'Š':'S', 'š':'s', 'Đ':'Dj', 'đ':'dj', 'Ž':'Z', 'ž':'z', 'Č':'C', 'č':'c', 'Ć':'C', 'ć':'c', 'À':'A', 'Á':'A', 'Â':'A', 'Ã':'A', 'Ä':'A', 'Å':'A', 'Æ':'A', 'Ç':'C', 'È':'E', 'É':'E', 'Ê':'E', 'Ë':'E', 'Ì':'I', 'Í':'I', 'Î':'I', 'Ï':'I', 'Ñ':'N', 'Ò':'O', 'Ó':'O', 'Ô':'O', 'Õ':'O', 'Ö':'O', 'Ø':'O', 'Ù':'U', 'Ú':'U', 'Û':'U', 'Ü':'U', 'Ý':'Y', 'Þ':'B', 'ß':'Ss', 'à':'a', 'á':'a', 'â':'a', 'ã':'a', 'ä':'a', 'å':'a', 'æ':'a', 'ç':'c', 'è':'e', 'é':'e', 'ê':'e', 'ë':'e', 'ì':'i', 'í':'i', 'î':'i', 'ï':'i', 'ð':'o', 'ñ':'n', 'ò':'o', 'ó':'o', 'ô':'o', 'õ':'o', 'ö':'o', 'ø':'o', 'ù':'u', 'ú':'u', 'û':'u', 'ý':'y', 'ý':'y', 'þ':'b', 'ÿ':'y', 'Ŕ':'R', 'ŕ':'r', 'ü':'u', 'Ü':'U', 'ű':'u', 'ő':'o', 'Ő':'o', 'Ű':'U'
  };
    return (this.replace(translate_re, function(match){
        return translate[match];})
    );
};

..... than in the override .........
function(a, b){
                               var headerA = a.header.toLocaleLowerCase().strip();
                               var headerB = b.header.toLocaleLowerCase().strip();
                               return headerA.localeCompare(headerB)
                           });
.......

Many thanks for the help.
SWK