PDA

View Full Version : Override 'afteredit' event on EditorGridPanel



rendianmendian
24 Apr 2008, 12:28 AM
I have a EditorGridPanel as follow:

Column model:

var mGridColumns= new Ext.grid.ColumnModel([{
id : 'grid-column-1',
header : 'Test',
width : 120,
sortable : false,
editor : new Ext.form.TextField({
onClick : function() {}
}),
dataIndex : 'data1'
}]);

Grid object:

var mGrid= new Ext.grid.EditorGridPanel({
id : 'mGrid',
ds : mGridDataStore,
cm : mGridColumns,
clicksToEdit : 2,
selModel : new Ext.grid.RowSelectionModel({
singleSelect : false,
moveEditorOnEnter : false
}),
viewConfig : mGridView
});

How do I override the function executed after I do an edit on the 'Test' column?
Normally when after updating the value, the normal behavior is then the textfield will be removed, and the column will be filled with the new value.

Is it possible to override this? For example, instead of removing the textfield, I want to do some thing else.

I tried to use:


multiGrid.on('afteredit', function(e) {
// Do something else...
});

but it doesn't work.

Thanks in advance.
Cheers,

:D

Animal
24 Apr 2008, 12:38 AM
"doesn't work"?

So, did you set a breakpoint in that function to see if it actually got there?

rendianmendian
24 Apr 2008, 12:54 AM
Well it did work of course.
The breakpoint went there just fine as expected.
But what I'm trying to do here is to override the original flow.

For instance:
I dont want the textfield to be gone, instead, I want to change the textfield background color into red.

That is basically what I'm trying to do... :)



"doesn't work"?

So, did you set a breakpoint in that function to see if it actually got there?

Animal
24 Apr 2008, 1:07 AM
After editing, the editor field gets hidden. It is shared for editing all cells in the column so it can only be shown during edit of a particular cell.

Are you saying you want edited cells to get a style?

They already do. They get the class "x-grid3-dirty-cell" which gives them that little triangle in the top left corner.

You can add your own CSS rule for that class which overrides the background styling.

rendianmendian
24 Apr 2008, 1:21 AM
Well that background-color thingy is just an example ^^

Ok here's what I really want to do... :)

As far as I understand, once I press 'enter' on the textfield, here are what happen afterward: (please correct me if I'm wrong)
[1] The new value will be passed to the data store
[2] The textfield will be hidden.
[3] The row will be updated with the new value on the data store.

Basically I want to skip all those steps. I just want to catch the new value and hide the textfield, withouth updating datastore and the grid row itself.

And then I want to update the column 'manually' (not using the datastore). Because I dont use the datastore extensively anyway, so I figure that updating the grid manually is enough for now.

This is a workaround I made because of the flickering problems that I had when updating the row through the datastore. I'll provide the link below:

http://extjs.com/forum/showthread.php?t=32796


After editing, the editor field gets hidden. It is shared for editing all cells in the column so it can only be shown during edit of a particular cell.

Are you saying you want edited cells to get a style?

They already do. They get the class "x-grid3-dirty-cell" which gives them that little triangle in the top left corner.

You can add your own CSS rule for that class which overrides the background styling.

Animal
24 Apr 2008, 1:29 AM
OK, then just return false from a "validateedit" event handler.

rendianmendian
24 Apr 2008, 1:55 AM
OK, then just return false from a "validateedit" event handler.
Ahhh, that one slipped out of my sight. Thx a bunch.