PDA

View Full Version : Ext.selection.CheckboxModel in grid not executing any listener on selectall .



sagi.kiran
24 Jul 2012, 8:17 AM
Hi,
Below is description of my issue :

ISSUE : I am having Ext.selection.CheckboxModel for a checkbox column in a grid. I am suppose to execute SelectAll & DeSelectAll rows once I click on header checkbox ( Which is by default implementation in Extjs 4.0.2a).

I migrated to Extjs 4.0.7 and I found on click of Header Checkbox ( in Grid) is not executing any listener like select, deselect. Hence my existing code is not working properly.

Can you please let me know why any listeners are not executing now on select All ( click on header checkbox in checkbox column of grid). If possible please provide any workaround if required.

Ext.create('Ext.selection.CheckboxModel', {
listeners : {
deselect : function(model, record, index) {

id = record.get('productLineItem').split(' ').join('_X_');

var productLineIdString = Ext.getCmp('selectedProductLineId')
.getValue();

var newString = productLineIdString.replace(id, "");

Ext.getCmp('selectedProductLineId').setValue(
Util.removeSpaces(newString));

},
select : function(model, record, index) {

var id = record.get('productFamilyBlockId');

Ext.getCmp('selectedId').setValue(id);
var modifiedProductLine = record.get('productLineItem').split(
' ').join('_X_');

var productLineId = modifiedProductLine + " "
+ Ext.getCmp('selectedProductLineId').getValue();

Ext.getCmp('selectedProductLineId').setValue(
Util.removeSpaces(productLineId));

}
}
})

NOTE:
1)Above listeners are executing perfectly on single or multiple row level checkbox click.
2) I am facing issue once I started using Extjs 4.0.7 libraries.

dbrin
24 Jul 2012, 9:46 AM
Looks like this was a bug in 4.0.7 (http://www.sencha.com/forum/showthread.php?148306-CheckboxModel-select-event-is-not-being-triggered-when-you-select-from-select-all) but was fixed in later builds. If you don't want to upgrade you could apply an override listed in this post (http://www.sencha.com/forum/showthread.php?188306-How-to-get-the-header-checkbox-%28selectall%29-event-on-a-selection-model&p=757605&viewfull=1#post757605). Someone created a live example (http://jsfiddle.net/serju/SDtpR/1/) of this workaround here, it might be helpful to try it out.

sagi.kiran
24 Jul 2012, 10:05 PM
got it fixed by adding a few line of code in my existing implementation.

selModel : Ext.create('Ext.selection.CheckboxModel', {
onHeaderClick : function(headerCt, header, e) {
if (header.isCheckerHd) {
e.stopEvent();
var isChecked = header.el.hasCls(Ext.baseCSSPrefix
+ 'grid-hd-checker-on');
if (isChecked) {
this.deselectAll(true);
Ext.getCmp('selectedProductLineId').setValue(''); // setting up selected value as blank.
// require code as event does select / deselect checkboxes with css..
Ext.getCmp('selectedId').setValue('');
console.log('all unchecked');

} else {
var deallocationStore = qnum.app.getController(
'qnum.controller.AdminController').getStore(
'familyblocks.DeAllocationListStore');
this.selectAll(true);
deallocationStore.each(function(record) {
var id = record.get('productFamilyBlockId');

// copy paste code of my existing logic.
});

}
}
},
listeners : {
deselect : function(model, record, index) {

// Existing code.
},
select : function(model, record, index) {

// Existing code.
}
}
}),