Grid Panel中CheckboxModel全选时如何动态更新列头文本？

要实现全选时将表头文本从“Select All”改为“Unselect All”，同时在取消部分选择时恢复原文本，可以按以下方式修改你的配置：

修改后的完整代码 #

selMode:{
    selType:'checkboxmodel',
    checkOnly: true,
    headerText:"Select All",

    listeners:{
        select:function(sm, record, index){
            // 校验是否已选中所有记录
            if(sm.selected.getCount() === sm.store.getCount()){
                // 更新选择模型的headerText配置
                sm.headerText = "Unselect All";
                // 获取Grid表头容器并定位checkbox列
                var checkColumn = sm.view.headerCt.down('[isCheckboxHeader]');
                if(checkColumn){
                    // 更新表头文本并触发布局刷新
                    checkColumn.setText(sm.headerText);
                    sm.view.headerCt.updateLayout();
                }
            }
        },
        // 补充取消选择的监听，恢复原文本
        deselect:function(sm, record, index){
            if(sm.selected.getCount() < sm.store.getCount()){
                sm.headerText = "Select All";
                var checkColumn = sm.view.headerCt.down('[isCheckboxHeader]');
                if(checkColumn){
                    checkColumn.setText(sm.headerText);
                    sm.view.headerCt.updateLayout();
                }
            }
        }
    }
}

关键细节说明 #

• 用sm.selected.getCount()替代直接访问items.length，这是ExtJS官方推荐的API，兼容性和可靠性更强
• 通过sm.view.headerCt.down('[isCheckboxHeader]')精准定位checkbox选择列，避免硬编码列索引的维护问题
• 调用updateLayout()确保表头组件重新渲染，保证文本修改实时生效
• 新增deselect事件监听，覆盖“取消部分选择”的场景，让交互逻辑更完整

内容的提问来源于stack exchange，提问作者vasudev.p