Question

The Sencha ExtJS framework Ext.grid.Panel component is great for representing result set data. However, it gets rather annoying for end-users when they try to enable and disable the columns in the grid. When you click the right side of a column header, a down arrow appears indicating there’s a menu. When you click that arrow, a menu drops down. In any other HTML application based menu (or desktop app menu), you can either hover over a [sub] menu option or click the [sub] menu option and the next sub menu pops out. In the case of the Ext.grid.Panel, when you click a menu option on the main header menu hoping to expand the nested sub-menu, the entire root (column header) menu disappears. This would be represented as an enhancement by Sencha since there is a workaround–that being don’t click on the menu option “Columns”. It still works if you don’t click, but it’s just not intuitive. Who is bright enough to fix this in the extjs 4 framework code?

Answer 1

According to source files in the documentation this behavior is fixed in 4.1.2 (which is not available yet for public).

But!

Ext.define('MenuFix', {
    override: 'Ext.menu.Item',
    onClick: function () {
        return this.menu ? null : this.callParent(arguments);
    }
});