ExtJS edit grid cell only it is new

Question

I have a grid:

Ext.create('Ext.grid.Panel', {
    id: 'grid',
    store: this.store,
    columns: [{
        dataIndex: 'a'
    },{
        dataIndex: 'b'
    },{
        dataIndex: 'c'
    }],
    selModel: {
        selType: 'cellmodel'
    },
    plugins: [cellEditing]
})

Which uses cellEditting:

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1,
    listeners: {
        beforeedit: function(obj) {
                // Something goes here?
        }   
    }
});

Now, there are buttons to 'add row' to the grid, so records may be new or old.

In the case that a new row was added to the store/panel, I need columns b and c to be editable.
In the case that the user is trying to edit an existing row that was simply loaded from the database when the panel was created, I need only column c to be editable.

I suspect I need to add something to the beforeedit listener, but I am new to ExtJS and javascript in general so I don't know how to describe the conditions.

Rich Waters Rich Waters · Accepted Answer · 2013-02-25T23:36:54

You're definitely on the right track. The 'beforeedit' event allows you to prevent the editing operation by returning false. If you review the documentation for it you can see you receive an object that provides all the needed information about the cell: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing-event-beforeedit

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1,
    listeners: {
        beforeedit: function(editor, event, opts) {
            if (!event.record.phantom && event.column.dataIndex == 'columnC') {
                return false;
            }
        }   
    }
});

phantom is a record property that is maintained to know whether a record was newly created (not yet synced to server) or was loaded with all the others in the store initially.

ExtJS edit grid cell only it is new

1 Answers