PDA

View Full Version : Ext.us.grid.RowEditor override and combo boxes



john.dunlap
24 Jan 2011, 7:24 AM
These are a few overrides that I needed when working with Ext.ux.grid.RowEditor in Ext 3.3.1



Ext.override(Ext.ux.grid.RowEditor, {

/**
* This override fixes a bug and adds a feature to Ext.ux.RowEditor.
*
* BUG - The bug was causing all date fields to be marked as dirty, even if the user left the value of the date field
* unmodified in the row editor. The reason for this was that the editor was determining if a field had been modified
* by invoking the field's getValue method and comparing it to the value in the grid's store. The problem with this is
* that getValue returns a formatted date string which the editor was comparing a javascript date object obtained from
* the grid's store. Changing the invocation of getValue to getRawValue fixed the problem.
*
* FEATURE - Using combo boxes with the row editor was somewhat tedious because, while a combo has both a displayField
* and a valueField, the row editor only updates a single field in the grid's store. In my case, I wanted the
* displayField to be updated in the grid so that the user could visually confirm that the value had been changed but
* I also wanted the valueField to be updated in the grid's store so invoking the store's save method would
* correctly update the record on the server by id instead of by name. The alternative workaround seemed to be setting
* up an ajax call to the server when the row editor's save button was clicked and then reloading the grid's store. I
* would prefer to simply edit the grid and then save the grid's store. My solution, shown below, is to during the
* editor's save operation join the combo's store against the grid's store using the valueField config property of the
* combo as a common key. Therefore, as long as the identifier names in the grid's store and the combo's store match,
* the identifier of the newly selected value, in the combo, will be silently updated in the grid's store. Saving the
* grid's store will then persist this change to the server.
*/
stopEditing : function(saveChanges){
var si = this.storeDataIndex;

this.editing = false;
if(!this.isVisible()){
return;
}
if(saveChanges === false || !this.isValid()){
this.hide();
this.fireEvent('canceledit', this, saveChanges === false);
return;
}

var changes = {},
r = this.record,
hasChange = false,
cm = this.grid.colModel,
fields = this.items.items;
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
var f = fields[i];
if(!cm.isHidden(i)){
var dindex = cm.getDataIndex(i);
if(!Ext.isEmpty(dindex)){
var oldValue = r.data[dindex], newValue = this.postEditValue(f.getValue(), oldValue, r, dindex);
if(oldValue !== newValue){
if (f.getXType() === 'combo' && dindex !== 'id' && dindex !== f.initialConfig.valueField){
changes[f.initialConfig.valueField] = f.getValue();
changes[dindex] = f.getRawValue();
}
else
changes[dindex] = newValue;
hasChange = true;
}
}
}
}

if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
r.beginEdit();
Ext.iterate(changes, function(name, value){
r.set(name, value);
});
r.endEdit();
this.fireEvent('afteredit', this, changes, r, this.rowIndex);
}
this.hide();
},

/**
*
* This override fixes one bug.
*
* BUG - Invalid fields are not marked as invalid when the row editor is first opened, although they are correctly
* marked as invalid then the row editor is subsequently opened. This override fixes this by invoking the
* refreshFields method at the end of the row editor's init method.
*/
init: function(grid){
this.grid = grid;
this.ownerCt = grid;
if(this.clicksToEdit === 2){
grid.on('rowdblclick', this.onRowDblClick, this);
}else{
grid.on('rowclick', this.onRowClick, this);
if(Ext.isIE){
grid.on('rowdblclick', this.onRowDblClick, this);
}
}

// stopEditing without saving when a record is removed from Store.
grid.getStore().on('remove', function() {
this.stopEditing(false);
},this);

grid.on({
scope: this,
keydown: this.onGridKey,
columnresize: this.verifyLayout,
columnmove: this.refreshFields,
reconfigure: this.refreshFields,
beforedestroy : this.beforedestroy,
destroy : this.destroy,
bodyscroll: {
buffer: 250,
fn: this.positionButtons
}
});
grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
this.refreshFields();

this.addListener('beforeedit', function(){
grid.setDisabled(true);
});

this.addListener('canceledit', function(){
grid.setDisabled(false);
});

this.addListener('validateedit', function(){
grid.setDisabled(false);
});

this.addListener('afteredit', function(){
grid.setDisabled(false);
});
}
});

freeExec
25 Nov 2011, 4:41 AM
lost code in stopEdition func



if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
r.beginEdit();
Ext.iterate(changes, function(name, value){
r.set(name, value);
});
r.endEdit();
this.fireEvent('afteredit', this, changes, r, this.rowIndex);
} else {
this.fireEvent('canceledit', this, false);
}

else {
this.fireEvent('canceledit', this, false);
}