PDA

View Full Version : EditorGrid checkcolumn - Checking one unchecks others



catapult
16 Feb 2010, 6:21 AM
I have an EditorGrid with a checkcolumn and I need to be able to uncheck all other check boxs when one is selected. Basically I want only one check box to be checked at anytime.

Doe anyone know the best way to achieve this?

realjax
16 Feb 2010, 7:21 AM
Then forget the checkbox and simply use the selected row.

catapult
16 Feb 2010, 7:37 AM
I wanted more of a visual confirmation for which row had been selected for my users.

I have 3 grid panels on the screen. Depending on which options they select from from the grids depends on what happens next. Using a grid panel is ideal as the options are dynamically create based on serverside logic.

Eugen_
16 Feb 2010, 8:17 AM
Hi catapult,

add this before your CheckColumn:



Ext.override(Ext.grid.CheckColumn, {
onMouseDown: function(e, t) {
if (Ext.fly(t).hasClass(this.createId())) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
if (record.data[this.dataIndex]) {
record.set(this.dataIndex, false);
} else {
for (var i = 0; i < this.grid.store.getCount(); i++) {
this.grid.store.getAt(i).set(this.dataIndex, false);
}
record.set(this.dataIndex, true);
}
}
this.grid.store.commitChanges(); // if you need auto commit
}
});
but it will be slow if your store contains many records


second version:



Ext.override(Ext.grid.CheckColumn, {
onMouseDown: function(e, t) {
if (Ext.fly(t).hasClass(this.createId())) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
if (record.data[this.dataIndex]) {
recordChecked = null;
} else {
if (this.recordChecked != null) {
this.recordChecked.set(this.dataIndex, false);
}
}
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
this.grid.store.commitChanges(); // if you need auto commit
},
renderer : function(v, p, record) {
if (v) {
this.recordChecked = record;
}
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());
},
recordChecked: null
});

catapult
17 Feb 2010, 3:23 AM
Eugen, that works perfectly and does exactly what I require. :D

Many thanks