extjs checkboxselection 标头未更新

Posted 2023-02-26

【中文标题】extjs checkboxselection 标头未更新

【英文标题】：extjs checkboxselection header not updating

【发布时间】：2011-11-01 16:28:42

【问题描述】：

我有一个带有 CheckBoxSelectionModel 的 ExtJs 网格。选中 header 复选框 会选中所有记录，取消选中复选框会取消选中所有记录，这当然是行为。我的网格有一个删除按钮来删除选定的/所有记录，并且工作正常。

现在我的问题是，当我选中标题处的复选框（以便选择整个记录）并点击我的删除按钮时，网格中的所有记录都将被删除。 但是，列标题中的复选框选择仍然保持选中状态。

我使用代码：grid.getSelectionModel().clearSelections(false); 清除选择，删除后。我猜，此代码仅适用于网格中的记录，与列标题部分无关。有什么办法，我可以取消选择标题中的复选框吗？

经过详细调查，我惊讶地发现 CheckBoxSelectionModel 中显示的复选框不是 html 复选框，而是图像。所以我使用 DOM 概念取消选中复选框的想法不能在这里应用。相反，必须使用某种 CSS 技巧。

以前有人遇到过这样的问题吗？有什么解决办法吗？ 任何帮助将不胜感激。 谢谢！

【参考方案1】：

将侦听器应用于 CheckboxSelectionModel ：

试试这个：

    var sm = new Ext.grid.CheckboxSelectionModel(
    listeners : 
            selectionchange : function()
                var recLen = Ext.getCmp('grid').store.getRange().length;
                var selectedLen = this.selections.items.length;
                if(selectedLen == recLen)
                    var view   = Ext.getCmp('grid').getView();
                    var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker")
                    chkdiv.addClass("x-grid3-hd-checker-on");
                
            
            ,rowdeselect : function ( sm ,rowIndex ,record) 
                var view   = Ext.getCmp('grid').getView();
                var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker")
                chkdiv.removeClass('x-grid3-hd-checker-on');
            
    
 );

【讨论】：

嘿，谢谢@MMT。忙于一些工作。感谢您的解决方案。让我试一试，很快就会回来:)

【参考方案2】：

添加一个 ELSE 检查以避免设置标题检查并更新 selectionmodel 选择小于存储长度的行时的情况：

var sm = new Ext.grid.CheckboxSelectionModel(
    listeners : 
            selectionchange : function()
                var recLen = Ext.getCmp('grid').store.getRange().length;
                var selectedLen = this.selections.items.length;
                var view   = Ext.getCmp('grid').getView();
                var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker")
                if(selectedLen == recLen)
                    chkdiv.addClass("x-grid3-hd-checker-on");
                 else 
                    chkdiv.removeClass("x-grid3-hd-checker-on");
                
            
            ,rowdeselect : function ( sm ,rowIndex ,record) 
                var view   = Ext.getCmp('grid').getView();
                var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker")
                chkdiv.removeClass('x-grid3-hd-checker-on');
            
    
 );

【参考方案3】：

var view = grid.getView();
var chkdiv = Ext.fly(view.innerHd).child(".x-grid3-hd-checker");
chkdiv.removeClass("x-grid3-hd-checker-on");

我在上面直接添加到按钮点击监听器中。