ExtJS 4.1:FocusManager.enable通过菜单隐藏网格列以更改位置哈希

Question

如果启用了FocusManager，则通过菜单标题隐藏网格列会导致位置哈希发生更改。如果未启用FocusManager，则不会发生这种情况。我尝试重写Ext.menu.Item onClick以停止event，但这不起作用，因为看起来浏览器单击事件是不可访问的，因为EventManager正在包装侦听器并将其替换为EventObject焦点事件。

以下是示例代码(同样位于http://jsfiddle.net/jacobg/8X3qw/)。您可以看到位置散列更改的控制台日志，并尝试使用FocusManager.enable注释掉和取消注释：

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

在这种情况下，散列确实在改变。若要绕过此问题，可以在Ext.grid.header.Container类上创建onColumnCheckChange方法的覆盖，并在那里防止默认的鼠标事件。例如，您可以通过在网格的columns配置属性中提供头容器的配置来实现这一点。示例：

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

工作样品：http://jsfiddle.net/VQN3H/5/