PDA

View Full Version : Adding CheckboxSelectionModel to grid ?



duskandawn
4 Aug 2010, 10:20 AM
Hello All,
Please have a look at my grid structure below


Ext.ns('Test.grid');
Test.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
var config = {
store: this.buildStore(),
cm : this.buildColumnModel(),
sm: this.buildSelectionModel(),
}
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Test.grid.Grid.superclass.initComponent.apply(this, arguments);
},
buildColumnModel : function(){
return new Ext.grid.ColumnModel({
columns: [
this.buildSelectionModel(),
new Ext.grid.RowNumberer() ]
});
},

buildSelectionModel : function(){
return new Ext.grid.CheckboxSelectionModel({
checkOnly : true,
renderer : function(v, p, record){
if (record.data.selected == 'na'){
return '<div> </div>';
}else{
return '<div class="x-grid3-row-checker"></div>';
}
}
});
}
});



Using the above code, my buildSelectionModel() is being called twice when i grid is rendered for the first time.
My question is this the right way to use the selectionModel.
If i just use new Ext.gird.CheckboxSelectionModel in my columnModel, it doesnt reflect the initial row class changes which i make on its render.
Is there any centralized location i can create this sm, and add it in my grid config at both sm and cm.

Thank you,

j_mmontero
4 Aug 2010, 11:49 AM
Check this example:
http://www.sencha.com/deploy/dev/examples/grid/grid-plugins.html

Condor
4 Aug 2010, 11:57 PM
You are creating 2 CheckboxSelectionModels (one for the grid selection model and one for the column).

Those 2 need to be the same instance!

duskandawn
5 Aug 2010, 4:51 AM
Thanks,
Yes i figured this out, and sensed there is something wrong the way i am doing it.
So looking at the example, i came up with this :


Ext.ns('Test.grid');
var sm = new Ext.grid.CheckboxSelectionModel({
checkOnly : true,
onHdMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
this.clearSelections();
}else{
hd.addClass('x-grid3-hd-checker-on');
grid.getStore().each(function(rec){ // this is the place its failing
if(rec.data.selected == 'yes' || rec.data.selected == 'no'){
var index =grid.getStore().indexOf(rec); // here
grid.getSelectionModel().selectRow(index, true);
}
});

Test.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
var config = {
store: this.buildStore(),
cm : this.buildColumnModel(),
sm: sm,



So how do i refer to my grid instance now, since its outside the grid object.
I do some validations on the header click for the selection model on the rows present in my grid ?

Thank you for all your help till now,