1. #11
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    203
    Vote Rating
    0
    garraS is on a distinguished road

      0  

    Default


    You are missing display:block;
    Code:
    .ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn {
        background-image:url(btn.png);
        width:16px;
        display:block;
    }
    
    a.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn:hover {
        background-position:-16px center;
    }

  2. #12
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by MindPatterns View Post
    Yap sorry, my fault. It's because you did not create a view object yourself and let Ext do the magic.
    the fix is actually even simpler than that

    in the plugin's init() method, simply change the following line
    Code:
    this._view = grid.view;
    to
    Code:
    this._view = grid.getView();
    and voila. enjoy

  3. #13
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    also found that moving repeating the following call
    Code:
    this.menuBtn.dom.style.height = (this._view.mainHd.dom.offsetHeight-1)+'px';
    to in the plugin's init() method like so
    Code:
    this._view.on('refresh', function() {
        this.menuBtn.dom.style.height = (this._view.mainHd.dom.offsetHeight-1)+'px';
    }, this);
    works better for auto-configured grids (i.e. grid meta sent from the server).


    solved by hooking into the gridview's onLayout() method.

    complete override (including fix from previous post):
    Code:
    Ext.override(Ext.ux.grid.GridViewMenuPlugin, {
        init : function(grid)
        {
            if (grid.enableHdMenu === true) {
                throw("Ext.ux.grid.GridViewMenuPlugin - grid\"s \"enableHdMenu\" property has to be set to \"false\"");
            }
    
            var v = this._view = grid.getView();
            v.afterMethod('initElements', this.initElements, this);
            v.afterMethod('initData', this.initData, this);
            v.afterMethod('onLayout', this._onLayout, this); // auto-size plugin on view layout
            v.beforeMethod('destroy', this._destroy, this);
    
            this.colMenu = new Ext.menu.Menu({
                listeners: {
                    scope: this,
                    beforeshow: this._beforeColMenuShow,
                    itemclick: this._handleHdMenuClick
                }
            });
            this.colMenu.override({
                show : function(el, pos, parentMenu){
                    this.parentMenu = parentMenu;
                    if(!this.el){
                        this.render();
                    }
                    this.fireEvent("beforeshow", this);
    
                    // show menu and constrain to viewport if necessary
                    // ( + minor offset adjustments for pixel perfection)
                    this.showAt(
                        this.el.getAlignToXY(el, pos || this.defaultAlign, [Ext.isSafari? 2 : 1, 0]), 
                        parentMenu, 
                        true // true to constrain
                    );
                }
            });
        },
    
        _beforeColMenuShow : function(menu) {
            this._view.beforeColMenuShow.call(this, menu);
    
            // menu title tweak
            this.colMenu.insert(0, new Ext.menu.Separator());
            this.colMenu.insert(0, new Ext.menu.TextItem({
                text: String.format(
                    '<img src="{0}" class="x-menu-item-icon x-cols-icon" />{1}',
                    Ext.BLANK_IMAGE_URL,
                    this._view.columnsText
                ),
                style: 'line-height:16px;padding:3px 21px 3px 3px;'
            }));
        },
    
        /**
         * Hooks into the view's onLayout method and fits the menu to the grid header
         * @param vw
         * @param vh
         */
        _onLayout: function(vw, vh) {
            this.menuBtn.dom.style.height = (this._view.mainHd.dom.offsetHeight - 1) + 'px';
        }
    });
    Last edited by mystix; 13 Nov 2008 at 8:13 PM. Reason: update

  4. #14
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by garraS View Post
    You are missing display:block;
    Code:
    .ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn {
        background-image:url(btn.png);
        width:16px;
        display:block;
    }
    
    a.ext-ux-grid-gridviewmenuplugin-menuBtn.x-grid3-hd-btn:hover {
        background-position:-16px center;
    }
    Well, I was assuming you load the original css and load the override afterwards, thus "display:block" would not be needed.

  5. #15
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by mystix View Post
    lots of good stuff

    If you are among the three things I would take with me on a deserted island, it's your own fault!

  6. #16
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by MindPatterns View Post
    If you are among the three things I would take with me on a deserted island, it's your own fault!
    well thank goodness i'm not a thing.

  7. #17
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Thorsten, awesome dude!!! Saved me from having to write it. Thanks :-D

  8. #18
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    Thorsten, awesome dude!!! Saved me from having to write it. Thanks :-D
    Always glad if I can help

  9. #19
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    for some strange reason this
    Code:
    this.colMenu.show(t, 'tr-br?');
    causes my gridviewmenu to run off the bottom of my viewport when the menu list is too long, and subsequently causes a permanent mess-up of my layout until the browser is refreshed.

    changing it to this
    Code:
    this.colMenu.show(t, 'tr-tl?');
    fixes the issue, but might be a weird place to have the menu displayed.

  10. #20
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Good morning!

    Quote Originally Posted by mystix View Post
    for some strange reason this
    Code:
    this.colMenu.show(t, 'tr-br?');
    causes my gridviewmenu to run off the bottom of my viewport when the menu list is too long, and subsequently causes a permanent mess-up of my layout until the browser is refreshed.

    changing it to this
    Code:
    this.colMenu.show(t, 'tr-tl?');
    fixes the issue, but might be a weird place to have the menu displayed.
    do you have a screenshot?

    Any first guess if this might be a bug in Ext or do you think this is related to the position of the menu button within the dom?