Results 1 to 5 of 5

Thread: Stopping a click on the grid's header menu's "Columns" item from closing the menu

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    31

    Post Stopping a click on the grid's header menu's "Columns" item from closing the menu

    With the grid's columns' dropdown menu (containing items "Sort Ascending", "Sort Descending" and "Columns") we noticed a number of our users clicking on the "Columns" items (even though the extension menu automatically appeared), causing the whole menu to close. A number of users did this repeatedly before learning not to click on it.

    To stop a click on "Columns" from closing the menu, I edited the handleHdMenuClick function in GridView.js (actually I edited the minified version in ext-all.js):-

    Code:
     
        // private
        handleHdMenuClick : function(item){
            var index = this.hdCtxIndex;
            var cm = this.cm, ds = this.ds;
            switch(item.id){
                case "asc":
                    ds.sort(cm.getDataIndex(index), "ASC");
                    break;
                case "desc":
                    ds.sort(cm.getDataIndex(index), "DESC");
                    break;
               case "columns":
                   return false;
                default:
                    index = cm.getIndexById(item.id.substr(4));
                    if(index != -1){
                        if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
                            this.onDenyColumnHide();
                            return false;
                        }
                        cm.setHidden(index, item.checked);
                    }
            }
            return true;
        },
    I.e. I return false if "Columns" itself is clicked on, stopping the menu from being closed.

    This works well for our users. If you wish to add this to the core product, then that might be nice for all users. Thanks for your attention.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    The more correct thing would be to add an override to your Javascript which actually configures that menu entry not to hide when clicked.

    Changes in red:

    Code:
    Ext.override(Ext.grid.GridView, {
        renderUI : function(){
    
            var header = this.renderHeaders();
            var body = this.templates.body.apply({rows: '&nbsp;'});
            var html = this.templates.master.apply({
                body: body,
                header: header,
                ostyle: 'width:'+this.getOffsetWidth()+';',
                bstyle: 'width:'+this.getTotalWidth()+';'
            });
    
            var g = this.grid;
    
            g.getGridEl().dom.innerHTML = html;
    
            this.initElements();
    
            // get mousedowns early
            Ext.fly(this.innerHd).on("click", this.handleHdDown, this);
            this.mainHd.on("mouseover", this.handleHdOver, this);
            this.mainHd.on("mouseout", this.handleHdOut, this);
            this.mainHd.on("mousemove", this.handleHdMove, this);
    
            this.scroller.on('scroll', this.syncScroll,  this);
            if(g.enableColumnResize !== false){
                this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
            }
    
            if(g.enableColumnMove){
                this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
                this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
            }
    
            if(g.enableHdMenu !== false){
                if(g.enableColumnHide !== false){
                    this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"});
                    this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
                    this.colMenu.on("itemclick", this.handleHdMenuClick, this);
                }
                this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"});
                this.hmenu.add(
                    {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
                    {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
                );
                if(g.enableColumnHide !== false){
                    this.hmenu.add('-', {
                            id:"columns",
                            hideOnClick: false,
                            text: this.columnsText,
                            menu: this.colMenu,
                            iconCls: 'x-cols-icon'
                         }
                    );
                }
                this.hmenu.on("itemclick", this.handleHdMenuClick, this);
    
                //g.on("headercontextmenu", this.handleHdCtx, this);
            }
    
            if(g.trackMouseOver){
                this.mainBody.on("mouseover", this.onRowOver, this);
                this.mainBody.on("mouseout", this.onRowOut, this);
            }
            if(g.enableDragDrop || g.enableDrag){
                this.dragZone = new Ext.grid.GridDragZone(g, {
                    ddGroup : g.ddGroup || 'GridDD'
                });
            }
    
            this.updateHeaderSortState();
    
        }
    });

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I'll submit a Feature Request

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2009
    Location
    London, UK
    Posts
    31

    Smile Feature Request

    Quote Originally Posted by Animal View Post
    I'll submit a Feature Request
    Thanks for doing that.

  5. #5
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Fixed in SVN rev 3178.
    Aaron Conran
    @aconran

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •