Question

Hello, I’m developing a project using Ext Js that needs to edit a line in a grid. I’m trying to use a plugin I found in Ext’s documentation, plugins: [Ext.create (‘Ext.grid.plugin.RowEditing’)] but when I click on the line, update and cancel options appear on the grid, but the cell is not editable, does anyone know what’s going on?

The example in the documentation with the plugin is this: http://docs.sencha.com/ext-js/4-0/#!/example/restful/restful.html

My code so far:

Ext.define('GridEditavel',{

extend : 'Ext.grid.Panel',
title: 'Grid Editavel',
store: 'GridStore',
dockedItems : [ {
    xtype : 'toolbar',
    items : [ {
        xtype: 'button',
        text : i18n['vds.botao.nova.coluna'],
        icon : Webapp.icon('add1.png'),
        iconAlign : 'top',
        handler : function() {
            var gridView = Ext.ComponentQuery.query("gridpanel")[1];
            Ext.Msg.prompt('Message', 'Enter a column number:', function(
                    btn, text) {
                if (btn == 'ok' && text != null) {
                    var column = Ext.create('Ext.grid.column.Column', {
                        text : text
                    });
                    gridView.headerCt.insert(gridView.columns.length,
                            column);
                    gridView.getView().refresh();
                } else {
                    Ext.Msg.alert('Alert', 'Enter a column number!');
                }
            });
        }
    } ]
} ],
columns: [{
    header : 'Nome',
    dataIndex : 'nome',
    flex : 0.8
}],

plugins : [ Ext.create('Ext.grid.plugin.RowEditing') ]});

Answer 1

You need to set the editor property in the columns. Example:

columns:[{
header:'Nome',
dataIndex:'nome',
flex:0.8,
editor:'textfield'
}]

You can also use a config object for the editor, like this:

columns:[{
header:'Nome',
dataIndex:'nome',
flex:0.8,
editor:{
  xtype:'combo',
  store:'somestore'
}
}]