extjs checkboxselection заголовок не обновляется

Question

У меня есть ExtJs Grid с CheckBoxSelectionModel .Установка флажка header проверяет все записи, а снятие флажка снимает все записи, что, конечно, является поведением.Моя сетка имеет кнопку удаления, чтобы удалить выбранные / все записи, и работает нормально.

Теперь моя проблема заключается в том, что, когда я проверяю флажок в заголовке (так что будут выбраны все записи), и нажимает мое удалениеКнопка, все записи в сетке удаляются. Но выбор флажка в заголовке столбца по-прежнему остается неизменным.

Я использовал код: grid.getSelectionModel (). ClearSelections (false); для очисткиВыбор после удаления.Я думаю, этот код применим только к записям в сетке и не имеет ничего общего с частью заголовка столбца.Можно ли как-нибудь отменить выбор чекбокса в заголовке?

При подробном исследовании я удивлен, узнав, что флажок, отображаемый в CheckBoxSelectionModel, не является флажком html, но представляет собой изображения.Поэтому моя идея отменить выбор флажка с использованием концепции DOM не может быть применена здесь.Вместо этого нужно сделать что-то вроде CSS-трюка.

Кто-нибудь сталкивался с такой проблемой раньше?Есть ли решение для этого?Любая помощь будет оценена.Спасибо!

Answer 1

Я бы добавил проверку ELSE, чтобы избежать ситуации, когда вы устанавливаете проверенный заголовок и обновляете модель выбора, выбирая строки меньше длины магазина:

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 2

Применить слушателей к 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 3

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

Я добавил выше к слушателю нажатия кнопки непосредственно.