Extjs: grid crashes because of the Ext.grid.column.Widget

Question

Good day everybody!

I have created an Ext.grid.column.Widget in beforerender event of a Ext.grid.Panel component:

var column = Ext.create('Ext.grid.column.Widget', {
                text  : '...',
                width : 200,
                onWidgetAttach: function(column, widget, record) {
                     // simple operations
                },
                widget: {
                    xtype   : 'button',
                    text    : '...',
                    listeners: {
                        click: function(me, event, eOpts) {
                            // simple operations
                        }
                    }
                }
            });

Then I'm attaching this to a main Ext.grid.Panel component:

grid.headerCt.insert(2, column);

On this stage everything is nice, column with buttons are shown and acts well, but...

There is some additional functionality - window which is opened by clicking on other cell (gridcolumn), it uses ViewController and on onCellclick it calls:

record.callJoined('afterCommit', [fieldName]);

And then a crash:

Tracing shows that crash occurs here (ext-all-rtl-debug.js):

updateColumns: function(oldRow, newRow, columnsToUpdate, record) {
...
// Replace changed cells in the existing row structure with the new version
// from the rendered row.
for (colIndex = 0; colIndex < colCount; colIndex++) {
    column = columnsToUpdate[colIndex];
    // Pluck out cells using the column's unique cell selector.
    // Because in a wrapped row, there may be several TD elements.
    cellSelector = me.getCellSelector(column);
    oldCell = oldRow.querySelector(cellSelector);
    newCell = newRow.querySelector(cellSelector);
    // Copy new cell attributes across.
    newAttrs = newCell.attributes; // HERE IS THE CLUE????
    attLen = newAttrs.length;
    for (attrIndex = 0; attrIndex < attLen; attrIndex++) {
        attName = newAttrs[attrIndex].name;
        value = newAttrs[attrIndex].value;
        if (attName !== 'id' && oldCell.getAttribute(attName) !== value) {
            oldCell.setAttribute(attName, value);
        }
    }

console.log(newCell.attributes) shows such gridcolumn attributes:

But on a widget column it seems attributes variable equal to null.

I noticed that grid.columns array contains only gridcolumns and not contains widgetcolumn.

What I need to do to solve the error?

This is a huge project with dynamic grid constructor so I can't produce it in fiddle.

Answer 1

The problem is solved by adding necessary parameter to Ext.grid.column.Widget object:

dataIndex: 'WidgetColumn',