PDA

View Full Version : (User) Update to CheckColumn Plugin



CutterBl
22 Sep 2008, 6:16 PM
Today I was working on a new Editor Grid, for an app I'm doing, an decided to use the CheckColumn Plugin included with the demo code. Writing a few things, and testing things out, I found it odd that I could change the checkbox, thereby changing the value in the underlying record, but that it didn't fire the grid's 'afteredit' event. So, I wrote it in:

CheckColumn.js


Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},

onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
var editEvent = {
grid: this.grid,
record: this.grid.store.getAt(index),
field: this.dataIndex,
value: !record.data[this.dataIndex],
originalValue: record.data[this.dataIndex],
row: index,
column: this.grid.getColumnModel().findColumnIndex(this.dataIndex)
};
record.set(this.dataIndex, editEvent.value);
this.grid.fireEvent('afteredit',editEvent);
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">*</div>';
}
};

angelflaree
6 Oct 2008, 11:19 AM
yea, nice fix.
I found the problem too and I was going to select a row after the box is checked.

You might wonder why I didn't use the checkboxSelectionModel instead. It's because I have a button column inside the grid and it seems that if I clicked anywhere inside a row, the row will always be selected. But sometimes, I simply want to click my grid button inside that row, not to select the row.

mark.lancaster
16 Oct 2008, 5:16 AM
Just wanted to say thanks, your change helped me too.

micah.d.lamb
6 Feb 2009, 9:24 AM
Thanks that was helpful :)

Noel Jesus "ElNoE" Rivero
18 Sep 2009, 7:48 AM
Thanks!!B)

moulivedula
25 Oct 2009, 11:15 PM
Thank you very much for sharing the code.
Mouli.

MakFracta
26 Oct 2009, 4:18 PM
Hi

I made some modification to your code in order to allow toggle of the value using the keyboard (with SPACE (ASC 32) or ENTER (ASC 13)). This boost speed to the data entry.

Additionally I had to make it to take more kind of values ("1"|"0"|"true"|"false" as strings or 1|0|true|false), this is for the specific needs of my project, and can be easily extend to allow other literal values ("yes"|"no", "on"|"off", etc.)

I found a little complex to get the column object in both cases, it has to be done in 2 differente ways according with the arguments of each event (MouseDown and KeyPress), but I'm not ExtJS expert and I may be missing some API. It would be very usefull if some expert can check the code and give some directions to make that part of the code efficient.




Ext.ns('Ext.ux.grid');
Ext.ux.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);

//Tag the object as a checkColumn
this.checkColumn = true;
};

Ext.ux.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function()
{
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
//Add the keypress to the grid to monitor keys
this.grid.on('keypress', this.onKeyPress);
}, this);
},

createEditEvent: function(aGrid, aRecord, aRowIdx, aColumn, aNewVal, aOriVal)
{
var editEvent =
{
grid: aGrid,
record: aGrid.store.getAt(aRowIdx),
field: aColumn.dataIndex,
value: aNewVal,
originalValue: aOriVal,
row: aRowIdx,
column: aColumn
};
return editEvent;
},

onMouseDown : function(e, t)
{
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)
{
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
var colModel = this.grid.getColumnModel();
var colIdx = colModel.findColumnIndex(this.dataIndex);
var col = colModel.columns[colIdx];
var val = this.isTrue(record.data[col.dataIndex]);

var editEvent = this.createEditEvent(
this.grid, record, index, col,
!val,
val
);
record.set(this.dataIndex, editEvent.value);
this.grid.fireEvent('afteredit',editEvent);
}
},

onKeyPress : function (aEv)
{
var sm = this.getSelectionModel();
if (!sm.getSelectedCell) return;

var cell = sm.getSelectedCell();
var col = this.getColumnModel().columns[cell[1]];

/* If selected cell is checkColumn check the toggle keys. */
if (col.checkColumn)
{
var key = aEv.getKey();
//Space or ENTER
if ( (key == 32) || (key == 13) )
{
var record = this.store.getAt(cell[0]);
var val = col.isTrue(record.data[col.dataIndex]);
//Save the value in the record and trigger the event.
var editEvent = col.createEditEvent(
this, record, cell[0], col,
!val,
val
);
record.set(col.dataIndex, editEvent.value);
this.fireEvent('afteredit',editEvent);
}
}
},

isTrue : function(aVal)
{
//v could be 1 or 0 as number
if (typeof(aVal)=='string') //could be "true"|"false"|"1"|"0" as string
{
if (isFinite(aVal))
aVal = parseInt(aVal);
else
aVal = (aVal != "false") ? 1 : 0;
}
//Or Could be native true|false|1|0

return aVal;
},

renderer : function(v, p, record)
{
v = this.isTrue(v);

p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;

sosy
10 Aug 2010, 12:28 PM
+1 Thanks!!!