Ext.ux.grid.GridViewMenuPlugin

[garraS]

You are missing display:block;

.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;
}

[mystix]

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

this._view = grid.view;

to

this._view = grid.getView();

and voila. enjoy

[mystix]

also found that moving repeating the following call

this.menuBtn.dom.style.height = (this._view.mainHd.dom.offsetHeight-1)+'px';

to in the plugin's init() method like so

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):

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';
    }
});

[ThorstenSuckow]

You are missing display:block;

.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.

[ThorstenSuckow]

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!

[mystix]

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.

[jay@moduscreate.com]

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

[ThorstenSuckow]

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

Always glad if I can help

[mystix]

for some strange reason this

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

this.colMenu.show(t, 'tr-tl?');

fixes the issue, but might be a weird place to have the menu displayed.

[ThorstenSuckow]

Good morning!

for some strange reason this

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

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?