View Full Version : Cell editing, sync, and buffered rendering issue?

14 Aug 2015, 9:27 AM
I have a case where we want to use a cell editor in a grid and each time the cell fires it's 'edit' event, we want to to a store.sync(). I'm having a couple of issues:

1. Because the store.sync() causes a refresh on the view, tabbing to the next cell doesn't work because it invokes the cell editor on the next cell but then when the sync() call returns with the updated data, the table refreshes causing the cell editor to go away.

I originally extended the CellEditing like this to get around it which works except in the bufferred rendering case:

init: function(grid) {
this.view.on('refresh', function(viewComp){

// the view MUST have preserveScrollOnRefresh: true for this to work.
var context = this.context;
var cellDOM = this.getCell(context.record, context.column);
var activeCellEditor = this.getActiveEditor();
activeCellEditor.boundEl = cellDOM;

//Copied from the CellEditor.js onShow()
var innerCell = activeCellEditor.boundEl.first();
if (innerCell) {
var lastChild = innerCell.dom.lastChild;
if(lastChild && lastChild.nodeType === 3) {
// if the cell has a text node, save a reference to it
var textNode = activeCellEditor.cellTextNode = innerCell.dom.lastChild;
// save the cell text so we can add it back when we're done editing
activeCellEditor.cellTextValue = textNode.nodeValue;
// The text node has to have at least one character in it, or the cell borders
// in IE quirks mode will not show correctly, so let's use a non-breaking space.
if(textNode.nodeValue==='' || textNode.nodeValue === null){
// was blindly setting this to blank so check it first.
// was hitting a case if you edited one cell, then went to the next cell and didn't edit, then clicked off it
// the value was blank and didn't render the original value. It only changed the display value if you actually
// changed the value in the cell editor.
textNode.nodeValue = '\u00a0';
// HACK: Have to give the grids a moment to realign their heights.
// Otherwise the cell editor will be offset n pixels above the cell.
Ext.defer(function() {
var editor = this.getActiveEditor();
if (editor) editor.realign(true);
}, 10, this);

}, this);

2. The above works except in a bufferered renderering case because on refresh, if you were at the bottom of the grid and you have preserveScrollOnRefresh:true on the view, it wants to execute the above code but it hasn't scrolled to the right place yet so the var cellDOM = this.getCell(context.record, context.column); fails because the row doesn't exist yet until AFTER the refresh then the scroll to happens. I poked around in the BuffereredRenderer code but I didn't see any events that get fired to indicate it is done. I thought about perhaps overriding the method where it looks for a range then scrolls to for that, then fire a custom event and listen for that instead in the sample code but that didn't seem to work.

I thought about telling the store to suspectEvents before the sync() and after the callback returns resumeEvents, but then I'd have to update the row manually and wasn't sure how to do that. The data in one cell could affect the data in another cell - the server returns what the new data is in the response of the sync().

Does anyone have any alternative suggestions on how to approach this?

31 Aug 2015, 11:35 AM
Depending on the size of your buffer grid store you might even encounter degrading delay.

Have you considered implementing a row edit vs. cell?