1. #1
    Sencha User
    Join Date
    May 2014
    Posts
    5
    Vote Rating
    0
    Answers
    1
    Nagendrareddy is on a distinguished road

      0  

    Default Answered: Grid column header menu - sort columns alphabetically

    Answered: Grid column header menu - sort columns alphabetically


    Hi

    Am trying to migrate my application from 3.4 version to 4.2. Am stuck up with few things

    In 3.4 i used but in 4.2 its not working

    Code:
    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);
        }
    
    
    });
    4.2 Grid Code is below
    Code:
    grid = Ext.create('Ext.grid.Panel', {
            autoHeight: true,
            width: gridWidth(),
            store: store,
            trackMouseOver: true,
            stripeRows: true,
            frame: true,
            border: true,
            enableColumnHide: true,
            enableColumnMove: true,
            enableColumnResize: true,
            enableHdMenu: true,
            columns: gridColumns,
            loadMask: true,
            autoScroll: true,
            selModel: selectionModelChkBox,
    
    
            viewConfig: {
                forceFit: false,
                scrollOffset: 0,
                onLoad: Ext.emptyFn /*Note : Function to prevent scrollbar to re-initialize the position */
            },
    
    
            // paging bar on the bottom
            tbar: topToolBar,
            bbar: bottomToolBar,
            listeners: {
                cellclick: function (grid, cell, columnIndex, record, row, rowIndex, event) {
                    if (grid.headerCt.getGridColumns()[columnIndex].refWidth) {
                        popupDetails(grid, rowIndex, "indexID", "time_stamp", "dept_no", "Trade", "trade_blotter");
                        //UIServiceError.clearText();
                    }
                },
                columnresize: function (columnIndex, newSize) {
                    grid.headerCt.syncFx();
                    blotterView.saveBlotterSession(grid);
                },
                columnmove: function (oldIndex, newIndex) {
                    blotterView.saveBlotterSession(grid);
                }
            }
        });
    Can anyone please help me. Please post some sample code as am new to extjs.
    Appreciate in advance.

  2. Code:
    Ext.grid.header.Container.addMembers({
        sortColumns: function (items) {
            var itemsLn = items.length,
                columns = [],
                i = 1,
                j;
            if (itemsLn > 0) {
                columns[0] = items[0];
                for (i; i < itemsLn; i++) {
                    j = Ext.each(columns, function (col) {
                        if (col.text > items[i].text) {
                            return false;
                        }
                    });
    
    
                    if (true === j) {
                        Ext.Array.push(columns, items[i]);
                    } else {
                        Ext.Array.insert(columns, j, [items[i]]);
                    }
                }
    
    
                return columns;
            }
        }
    });
    
    
    
    
    Ext.grid.header.Container.override({
        getColumnMenu: function (headerContainer) {
            var menuItems = [],
                i = 0,
                item,
                items = headerContainer.query('>gridcolumn[hideable]'),
                itemsLn = items.length,
                menuItem;
    
    
    
    
            items = this.sortColumns(items);
            for (; i < itemsLn; i++) {
                item = items[i];
                menuItem = new Ext.menu.CheckItem({
                    text: item.menuText || item.text,
                    checked: !item.hidden,
                    hideOnClick: false,
                    headerId: item.id,
                    menu: item.isGroupHeader ? this.getColumnMenu(item) : undefined,
                    checkHandler: this.onColumnCheckChange,
                    scope: this
                });
                menuItems.push(menuItem);
    
    
    
    
                // If the header is ever destroyed - for instance by dragging out the last remaining sub header,
                // then the associated menu item must also be destroyed.
                item.on({
                    destroy: Ext.Function.bind(menuItem.destroy, menuItem)
                });
            }
            return menuItems;
        }
    });

  3. #2
    Sencha User
    Join Date
    May 2014
    Posts
    5
    Vote Rating
    0
    Answers
    1
    Nagendrareddy is on a distinguished road

      0  

    Default Got the work around

    Got the work around


    Code:
    Ext.grid.header.Container.addMembers({
        sortColumns: function (items) {
            var itemsLn = items.length,
                columns = [],
                i = 1,
                j;
            if (itemsLn > 0) {
                columns[0] = items[0];
                for (i; i < itemsLn; i++) {
                    j = Ext.each(columns, function (col) {
                        if (col.text > items[i].text) {
                            return false;
                        }
                    });
    
    
                    if (true === j) {
                        Ext.Array.push(columns, items[i]);
                    } else {
                        Ext.Array.insert(columns, j, [items[i]]);
                    }
                }
    
    
                return columns;
            }
        }
    });
    
    
    
    
    Ext.grid.header.Container.override({
        getColumnMenu: function (headerContainer) {
            var menuItems = [],
                i = 0,
                item,
                items = headerContainer.query('>gridcolumn[hideable]'),
                itemsLn = items.length,
                menuItem;
    
    
    
    
            items = this.sortColumns(items);
            for (; i < itemsLn; i++) {
                item = items[i];
                menuItem = new Ext.menu.CheckItem({
                    text: item.menuText || item.text,
                    checked: !item.hidden,
                    hideOnClick: false,
                    headerId: item.id,
                    menu: item.isGroupHeader ? this.getColumnMenu(item) : undefined,
                    checkHandler: this.onColumnCheckChange,
                    scope: this
                });
                menuItems.push(menuItem);
    
    
    
    
                // If the header is ever destroyed - for instance by dragging out the last remaining sub header,
                // then the associated menu item must also be destroyed.
                item.on({
                    destroy: Ext.Function.bind(menuItem.destroy, menuItem)
                });
            }
            return menuItems;
        }
    });
    Last edited by Gary Schlosberg; 6 May 2014 at 11:43 AM. Reason: code tags, jsbeautifier