extjs - 使用 rowEditing 插件在网格上进行数据编辑不起作用

Question

我正在使用 Ext Js 开发应用程序，但遇到了问题。我正在使用 RowEditing 插件来编辑我的行，用户还可以在网格中添加动态列和行。但是，当用户编辑该行时，只有第一列，即数据类型列，接受并显示编辑，其余接受编辑但不显示数据，如下图所示。

编辑前：

编辑后，点击更新按钮：

如您所见，其余列上的数据没有出现。

我的代码如下所示：

var store = Ext.getStore('StoreTemp');
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var contador = 1;
var contadorLinhas = 0;
Ext.define('Grid', {
extend : 'Ext.grid.Panel',
title: 'Grid',
store: 'StoreTemp',
columns: [ 
        {
         xtype: 'rownumberer',
     },{    
         header : "Data Type",
         dataIndex : 'nome',
         flex : 1,
         editor:'textfield'
     }],            
dockedItems : [ {
    xtype : 'toolbar',
    items : [ {
        xtype: 'button',
        tooltip: 'Click here to set data type on axis Y',
        id : 'buttonTipoDado',
        icon : Webapp.icon('edit.png'),
        iconAlign : 'top',
        handler : function() {
            var gridView = Ext.ComponentQuery.query('gridpanel')[1];
            Ext.Msg.prompt('Alert', 'Insert data type on axis Y', function(
                    btn, text) {
                if (btn == 'ok') {
                    gridView.getView().getHeaderAtIndex(1).setText(text);
                    var botao = Ext.getCmp('buttonTipoDado');
                    botao.setDisabled(true);
                } else {
                    Ext.Msg.alert('Alert', 'Insert a type!');
                }
                gridView.getView().refresh();
            });
        }
    }, {
        xtype: 'button',
        icon : Webapp.icon('add1.png'),
        iconAlign : 'top',
        handler : function() {
            var gridView = Ext.ComponentQuery.query('gridpanel')[1];
            grid = gridView.headerCt;
            if(grid.getGridColumns().length >= 1){
                var column = Ext.create('Ext.grid.column.Column', {dataIndex: 'column', text : contador, editor: {xtype: 'textfield', flex: 0.5, editable: true}});
                grid.insert(gridView.columns.length, column);
                gridView.getView().refresh();
                var botao = Ext.getCmp('buttonRemoverColuna');
                botao.setDisabled(false);
            }
            contador++;
        }
    }, {
        xtype: 'button',
        icon : Webapp.icon('cancel.png'),
        iconAlign : 'top',
        id : 'buttonRemoverColuna',
        handler : function() {
            var gridView = Ext.ComponentQuery.query('gridpanel')[1];
            gridView = gridView.headerCt;
            var botao = Ext.getCmp('buttonRemoverColuna');
            console.log(gridView.getGridColumns().length);
            if(gridView.getGridColumns().length == 2){
                console.log(gridView.getGridColumns().length);
                botao.setDisabled(true);    
                contador = 1;
            }
            else{
                gridView = gridView.remove(gridView.getGridColumns().length - 1);               
            }
        }
    }, {
        xtype: 'button',
        icon : Webapp.icon('add1.png'),
        iconAlign : 'top',
        handler: function(){
            var gridView = Ext.ComponentQuery.query('gridpanel')[1];
            store.insert(contadorLinhas, new Ext.create('model'));
            rowEditing.startEdit(0, 0); 
            contadorLinhas++;
            gridView.getView().refresh();
            if(contadorLinhas > 0){
                botao = Ext.getCmp('buttonRemoverLinha'),
                botao.setDisabled(false);
            }
        }   
    }, {
        xtype: 'button',
        icon : Webapp.icon('cancel.png'),
        iconAlign : 'top',
        id: 'buttonRemoverLinha',
        handler: function(botao){
            store.removeAt(contadorLinhas - 1);
            contadorLinhas--;
            if(contadorLinhas == 0){
                botao.setDisabled(true);
            }
        }   
    }]
} ],
plugins : [ rowEditing ]

});

Ext.define('model', {
extend : 'Ext.data.Model',
fields : [ {
    name : 'id',
    type : 'long'
}, {
    name : 'nome',
    type : 'string'
}, {
    name : 'column',
    type : 'array'
} ]
});

谁能给我一个见解？？谢谢。