Editing a line in an ExtJs grid

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') ]});

Please use English so that your answer is better understood. (Por favor, utilize a língua inglesa para que sua resposta seja melhor entendida.) — Filipe Manuel

Neil McGuigan Neil McGuigan · Accepted Answer · 2012-07-20T04:50:02

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'
}
}]

Editing a line in an ExtJs grid

1 Answers