Question

If FocusManager is enabled, then hiding a grid column via the menu header causes the location hash to change. This does not happen if FocusManager is not enabled. I tried overriding Ext.menu.Item onClick in order to stopEvent, but that doesn’t work, because it looks like the browser click event is inaccessible because EventManager is wrapping the listener and replacing it with an EventObject focus event.

Here is example code (also at http://jsfiddle.net/jacobg/8X3qw/). You can see console log of location hash change, and try with both FocusManager.enable commented out and uncommented:

window.onhashchange = function () {
    console.log('hash changed to: ' + location.hash);            
};

Ext.define('Company', {
    extend: 'Ext.data.Model',
    fields: [
       {name: 'company'},
       {name: 'price',      type: 'float', convert: null,     defaultValue: undefined},
       {name: 'change',     type: 'float', convert: null,     defaultValue: undefined},
       {name: 'pctChange',  type: 'float', convert: null,     defaultValue: undefined},
       {name: 'lastChange', type: 'date',  dateFormat: 'n/j h:ia', defaultValue: undefined}
    ],
    idProperty: 'company'
});

Ext.onReady(function() {

    //Ext.FocusManager.enable();

    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am']
    ];

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        model: 'Company',
        data: myData
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        store: store,
        columns: [
            {
                text     : 'Company',
                flex     : 75,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                width    : 50,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 50,
                sortable : true,
                dataIndex: 'change'
            }
        ],
        height: 200,
        width: 400,
        title: 'Array Grid'
    });
});​

Answer 1

Indeed hash is changing in that case. To bypass this, you can create override of onColumnCheckChange method on Ext.grid.header.Container class and prevent default on mouse event there. You can do so for example by providing config of header container in columns config property of grid. Example:

var grid = Ext.create('Ext.grid.Panel', {
    columns: {
        items: [...],
        onColumnCheckChange: function(checkItem, checked) {
            Ext.grid.header.Container.prototype.
                onColumnCheckChange.apply(this, arguments);
            window.event.preventDefault();
        }
    }
});

Working sample: http://jsfiddle.net/VQN3H/5/