PDA

View Full Version : RowEditor and custom renderers...



mjoksa
5 Jun 2009, 4:51 AM
Hello,
When I first saw RowEditor and thought that it is everything that I need for quick editing.
Then I tried it and saw something that just does not work for me.
In my grid I have custom renderer for one column. Values from that column cannot be changed by user and RowEditor will display values from store, not custom rendered values.
So, I changed some code in startEditing function and everything works fine now ;)
Changed function is below and changed code is colored red.


startEditing: function(rowIndex, doFocus){
if(this.editing && this.isDirty()){
this.showTooltip('You need to commit or cancel your changes');
return;
}
this.editing = true;
if(typeof rowIndex == 'object'){
rowIndex = this.grid.getStore().indexOf(rowIndex);
}
if(this.fireEvent('beforeedit', this, rowIndex) !== false){
var g = this.grid, view = g.getView();
var row = view.getRow(rowIndex);
var record = g.store.getAt(rowIndex);
this.record = record;
this.rowIndex = rowIndex;
this.values = {};
if(!this.rendered){
this.render(view.getEditorParent());
}
var w = Ext.fly(row).getWidth();
this.setSize(w);
if(!this.initialized){
this.initFields();
}
var cm = g.colModel, fields = this.items.items, f, val;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
if(!cm.isCellEditable(i, this.rowIndex)) {
val = cm.getRenderer(i)(val);
}
f = fields[i];
f.setValue(val);
this.values[f.id] = val || '';
}
this.verifyLayout(true);
if(!this.isVisible()){
this.setPagePosition(Ext.fly(row).getXY());
} else{
this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
}
if(!this.isVisible()){
this.show();
if(Ext.isIE){
this.doLayout();
}
}
if(doFocus !== false){
this.doFocus.defer(this.focusDelay, this);
}
}
},


To admins: I am sorry if this is not wright place to post these changes, so feel free to move it anywhere you find is suitable.

To ExtJS developers: Are you going to include previous changes is next RC?

Cheers

One more thing - this method is also changed (I just changed it):


stopEditing : function(saveChanges){
this.editing = false;
if(!this.isVisible()){
return;
}
if(saveChanges === false || !this.isValid()){
this.hide();
return;
}
var changes = {}, r = this.record, hasChange = false;
var cm = this.grid.colModel, fields = this.items.items;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
if(!cm.isHidden(i) && cm.isCellEditable(i, this.rowIndex)){
var dindex = cm.getDataIndex(i);
if(!Ext.isEmpty(dindex)){
var oldValue = r.data[dindex];
var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
if(String(oldValue) !== String(value)){
changes[dindex] = value;
hasChange = true;
}
}
}
}
if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
r.beginEdit();
for(var k in changes){
if(changes.hasOwnProperty(k)){
r.set(k, changes[k]);
}
}
r.endEdit();
this.fireEvent('afteredit', this, changes, r, this.rowIndex);
}
this.hide();
},

TopKatz
8 Jun 2009, 8:27 AM
I ran into this today, however your fix is apears to only handle the value argument of the renderer. Renderere takes


renderer: function(value, metaData, record, rowIndex, colIndex, store)

I do some stuff were I combine other parts of my record in my render. How can I get this to work like the real deal?

mjoksa
8 Jun 2009, 11:38 PM
These are all values you need for renderer for startEditing function:


value = val
record = record
rowIndex = this.rowIndex
colIndex = i
store = this.grid.getStore()

As for metaData, you just need to dig in deeper into code for RowEditor and find waht you need. Please, if you find solution for this post it here, so everyone can try it :)

Cheers

TopKatz
9 Jun 2009, 5:15 AM
duh!!

this does the trick for me:



if(!cm.isCellEditable(i, this.rowIndex)) {
rowIndex = this.rowIndex;
var m = '';
val = cm.getRenderer(i)(val, m, record, rowIndex);
}