1. #1
    Sencha User
    Join Date
    May 2014
    Posts
    4
    Answers
    1
    Vote Rating
    0
    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
    4
    Answers
    1
    Vote Rating
    0
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi