如何在 ExtJs 网格面板的列中添加全选/取消全选复选框？答案

【问题标题】：How to add Select/Deselect All checkbox in columns of a ExtJs grid panel?如何在 ExtJs 网格面板的列中添加全选/取消全选复选框？
【发布时间】：2022-01-29 16:27:00
【问题描述】：

我想在网格面板中的列名称之前的列下添加一个选择/取消选择所有列复选框以显示/隐藏所有列。由于网格中有大量列，因此用户想要选择全部然后取消选中他们想要隐藏或取消选择全部然后检查他们想要显示的内容。我使用的是 ExtJS 3.4 版本。

例如，选择/取消选择所有复选框应位于下面示例网格中 Columns 树下列表中的 First Name 之前：

sample extjs grid panel

谢谢！

【问题讨论】：

标签： extjs extjs-grid

【解决方案1】：

我认为没有现成的解决方案。您可以在顶部添加一个复选框并将所有菜单复选框设置为具有将选中所有框的绑定

bind: {
    checked: '{rullForThisCheckbox || checkAllCeckboxes}'
}

然后您将选中的顶部复选框设置为 {checkAllCeckboxes}

【讨论】：

感谢您的回复。按照您的建议，我可以通过在网格的标题部分放置一个复选框来显示或隐藏所有列。但我需要 Columns 菜单项下的 Select/Deselect All 复选框。

【解决方案2】：

您可以访问列菜单并手动插入全选/取消全选复选框。我已经测试过了，它可以工作，虽然它看起来不是开箱即用的。

grid.getHeaderContainer().getMenu().add({
  xtype: 'checkboxfield',
  fieldLabel: '(de)select all',
})

【讨论】：