Question

我有一个带有 CheckBoxSelectionModel 的ExtJs网格。选择标题复选框检查所有记录并取消选中该复选框取消选中所有记录，当然这是行为。我的网格有一个删除按钮，用于删除所选/所有记录，并且工作正常。

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

我使用了代码： grid.getSelectionModel（）。clearSelections（false）; 来删除后清除选择。我猜，这段代码只适用于网格中的记录，与列标题部分无关。有什么办法，我可以在标题中取消选择chekbox吗？

在详细调查中，我很惊讶地知道CheckBoxSelectionModel中显示的复选框不是html复选框，但它们是图像。因此，我无法在此处应用使用DOM概念取消选中复选框的想法。相反，必须要做一些CSS技巧。

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

Answer 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');
            }
    }
 });

Answer 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');
            }
    }
 });

Answer 3

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

我上面直接添加了按钮点击监听器。

extjs checkboxselection标头不更新

3 个答案: