Extjs网格限制列显示/隐藏检查

Question

我想限制用户检查/取消检查网格中的列。 这是默认的extjs网格，我希望在beforeselect事件或配置beforeselect其应用于列菜单checkboxes 。 因此，如果选择了“允许的最大列数”，并且用户尝试检查更多列，则将弹出错误消息。

请指导我，谢谢。

Answer 1

我不会做这些错误消息之类的东西，因为错误消息会惹恼用户。 当达到最大值时，我将在columnshow事件中禁用未选中的列，如下所示：

  var doCheckItems = function() {
          var showncolumns = Ext.Array.sum(grid.headerCt.query("gridcolumn").map(function(column) {return column.isVisible()?1:0;}));
          if(showncolumns >= 5) {
              Ext.each(grid.headerCt.getMenu().query("menucheckitem"),function(item) {
                  if(!item.checked) item.disable();
              })
          } else {
              Ext.each(grid.headerCt.getMenu().query("menucheckitem"),function(item) {
                  item.enable();
              })
          }
      };

  grid.headerCt.on('columnshow',doCheckItems);
  grid.headerCt.on('columnhide',doCheckItems);

https://fiddle.sencha.com/#fiddle/1fkj

但是，如果仍然需要，可以绑定到beforecheckchange上的menucheckitems事件：

var doCheckChange = function() {
    var showncolumns = Ext.Array.sum(grid.headerCt.query("gridcolumn").map(function(column) {return column.isVisible()?1:0;}));
    if(showncolumns >= 5) {
        Ext.Msg.alert('Error','Too many columns checked');
        return false;
    }
};
Ext.each(grid.headerCt.getMenu().query("menucheckitem"),function(item) {
    item.on('beforecheckchange', doCheckChange);
});

https://fiddle.sencha.com/#fiddle/1fkl