PDA

View Full Version : Event 'beforeedit' in EditableGridPanel



olegtaranenko
25 Dec 2010, 8:08 AM
Hi,

I'm wonder why I can not change the value in the 'beforeedit' to get it in the Ext.form.TextField editor attached to the grid's column. I found it is inconvenient in the not trivial cases of ExtJS using.
Would it be in the next versions of ExtJS? Where I should file my wish, some kind of bug tracking system by Sencha?

Thanks, Oleg

29 Dec 2010, 10:55 AM
Why would you change the value during a beforeedit event? Beforeedit is meant to be a 'vetoable' event. It could be an issue with references.

Condor
29 Dec 2010, 11:09 AM
Being able to modify the value before (and after) editing can be quite useful, but you can't do that with the beforeedit and afteredit events.

You need to override the preEditValue and postEditValue methods of the view to accomplish this.

29 Dec 2010, 11:17 AM
Being able to modify the value before (and after) editing can be quite useful, but you can't do that with the beforeedit and afteredit events.

You need to override the preEditValue and postEditValue methods of the view to accomplish this.
Understood, but have not had a need to do so.

That said, it seems to be a reference issue like I stated.

olegtaranenko
29 Dec 2010, 12:48 PM
Understood, but have not had a need to do so.

That said, it seems to be a reference issue like I stated.

In application I'm writing now grid's row should display a number of cell's which content is decorated from different attributes. Say empl, emplNo and 30 days cell more, where status, comment and team is shown. In one cell I should display a status as text, comment as a some mark and team as a background color.

Data store record looks like
{empl : 'Jon Smith'
, emplNo: 1
, days : [
{day: 1, status: 'p', team : 'A', remark: null}
, {day: 2, status: 'a', team : null, remark: 'sick'}
, ...
, {day: 30,...}
]}
parameter count of the day's subrecord could be changed in the future. Therefore I don't want to use a day1Status, day1Team and so on field.

User is able to edit status of every day. He double click at the cell and enter status in the employee on that day.
EditorGrid's Renderer could simple help to render cell according my wishes, but editing causes a pretty more problems. I will post a solution I found in the next post.

I think, it's not a rare case of using non plain DataStore, is it?

Oleg

olegtaranenko
29 Dec 2010, 12:58 PM
Being able to modify the value before (and after) editing can be quite useful, but you can't do that with the beforeedit and afteredit events.

You need to override the preEditValue and postEditValue methods of the view to accomplish this.

i've already found work around, it uses not such dirty hack you suggested :) It uses catching of the beforestartedit and beforecomplete events of the TextField's editor.
Essentially part of my solution is below:

var editor = this.colModel.getCellEditor(this.nonDayCols + 1);

editor.on( {
'beforestartedit' : {
fn: function (editor, boundEl, value) {
var day = editor.record.data.days[editor.col - this.nonDayCols];
if (day !== undefined) {
field = editor.field;
// fake standard handling, instead of this.setValue()
field.reset();
field.setValue(day.leave);

// save original value to restore it in the grid's validate listener
editor.startValue = value;
editor.realign(true);
editor.editing = true;
editor.show();
}
return false;
}
, scope :this
},
'beforecomplete' : {
fn : function (editor, value, startValue) {
var field = editor.field;
var dayIdx = editor.col - this.nonDayCols;
var day = editor.record.data.days[dayIdx];
day.leave = value;
var ognl = {dayIdx: dayIdx, dayField: 'leave', year: this.year, month: this.month};
PEP.Sys.myStoreSet('days', value, editor.record, ognl);
}, scope : this
}
});


I do not like this solution, but it seems the ExtJs grid is not intended to work with non-plain data sources.

Condor
29 Dec 2010, 11:41 PM
You can define those directly in your editor, e.g.

editor: new Ext.grid.GridEditor(new Ext.form.TextField({
// field config
...
}, {
// editor config
listeners: {
beforestartedit: function (editor, boundEl, value) {
...
},
beforecomplete: function (editor, value, startValue) {
...
}
}
})