CODEWITHSUNDEEP
extjs
abhilashca
abhilashca

Reputation: 249

extjs checkboxselection header not updating

I have an ExtJs Grid with CheckBoxSelectionModel. Selecting the header checkbox checks all the records and deselecting the checkbox unchecks all the records, of course which is the behavior. My grid has a delete button to delete the selected/all records and is working fine.

Now my problem is, when I check the checkbox at the header (so that entire records will be selected) and hits my delete button, the entire records in the grid is getting deleted. But, the checkbox selection in the column header still remains as checked.

I used the code: grid.getSelectionModel().clearSelections(false); to clear selection, after deletion. I guess, this code is only applicable to records in the grid and has nothing to do with the column header part. Is there any way, I can deselect the chekbox in the header?

On a detailed investigation, I's surprised to know that the checkbox displayed in the CheckBoxSelectionModel is not html checkboxes, but they are images. So my idea of deselecting the checkbox using the DOM concept cannot be applied here. Instead, some kinda CSS trick has to be done.

Does anyone faced such an issue before? Is there any solution for this? Any help will be appreciated. Thanks!

Upvotes: 2

Views: 4215

Answers (3)

Todayboy
Todayboy

Reputation: 365

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

I added above to the button click listener directly.

Upvotes: 0

Andrey Zausaylov
Andrey Zausaylov

Reputation: 1075

Id add an ELSE check to avoid the situation when you set header checked and update selectionmodel selecting rows less than store length:

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

Upvotes: 1

MMT
MMT

Reputation: 2216

Apply listeners to CheckboxSelectionModel :

try this :

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

Upvotes: 1

Related Questions