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