Row Editing in ExtJS Grid

Question

I am new to ExtJS.

I am trying to to add a row in my extjs grid with a handler associated to a image in one of my column. My row is getting added at specified index, but it doesn't automatically open in the edit mode. Could someone please help? I don't want to use the add button on the dock as shown in this link (http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.html)

Ext.onReady(function () {

Ext.define('CallSequence', {
 extend: 'Ext.data.Model',
 fields: [
     'group',
     'attempt',
     'device', 
     'channel', 
     'deliveryContent',
     { name: 'vm', type: 'bool' },
     'delay'         
 ]
});

var callSequenceStore = new Ext.data.JsonStore({
      model: 'CallSequence' ,
      autoDestroy: false,
      data: [
        { "group": "1", "attempt": "1", "device":"Mobile", "channel":"SMS", "deliveryContent":"SMS Message","vm":false, "delay":"10 mins"},
        { "group": "1", "attempt": "2", "device":"Mobile", "channel":"Voice","deliveryContent":"Voice Script","vm":true, "delay":"10 mins"},
        { "group": "1", "attempt": "3", "device":"Work", "channel":"Voice", "deliveryContent":"Voice Script","vm":false, "delay":"10 mins"},
        { "group": "1", "attempt": "4", "device":"Home", "channel":"Voice", "deliveryContent":"Voice Script","vm":false, "delay":"10 mins"},
        { "group": "1", "attempt": "5", "device":"Other", "channel":"Voice", "deliveryContent":"Voice Script","vm":true, "delay":"10 mins"},
        { "group": "1", "attempt": "6", "device":"Email", "channel":"Email", "deliveryContent":"Email Message","vm":false, "delay":"10 mins"},
        { "group": "", "attempt": "", "device":"", "channel":"", "deliveryContent":"","vm":false, "delay":"30 mins"},
        { "group": "2", "attempt": "1", "device":"Mobile", "channel":"SMS", "deliveryContent":"SMS Message","vm":false, "delay":"10 mins"},
        { "group": "2", "attempt": "2", "device":"Mobile", "channel":"Voice","deliveryContent":"Voice Script","vm":false, "delay":"10 mins"},
        { "group": "2", "attempt": "3", "device":"Work", "channel":"Voice", "deliveryContent":"Voice Script","vm":false, "delay":"10 mins"},
        { "group": "2", "attempt": "4", "device":"Home", "channel":"Voice", "deliveryContent":"Voice Script","vm":false, "delay":"10 mins"},
        { "group": "2", "attempt": "5", "device":"Other", "channel":"Voice", "deliveryContent":"Voice Script","vm":false, "delay":"10 mins"},
        { "group": "2", "attempt": "6", "device":"Email", "channel":"Email", "deliveryContent":"Email Message","vm":false, "delay":"10 mins"}

    ]
}); 

   var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
       clicksToMoveEditor: 1,
       autoCancel: false
   });


var grid = new Ext.grid.Panel({
    renderTo: document.body,
    frame:true,
    title: 'Call Sequence',
    height:400,
    width:800,
    store: callSequenceStore,
    plugins: [rowEditing],
    columns: [
        {header: 'Group', dataIndex: 'group',editor: {allowBlank: true}},      
        {header: 'Attempt', dataIndex: 'attempt',editor: {allowBlank: true}},
        {header: 'Device', dataIndex: 'device',editor: {allowBlank: true}},
        {header: 'Channel Window', dataIndex: 'channel',editor: {allowBlank: true}},
        {header: 'Delivery Content', dataIndex: 'deliveryContent',editor: {allowBlank: true}},
        {header: 'Voice Message', dataIndex: 'vm',xtype: 'checkcolumn',editor: {xtype: 'checkbox',allowBlank: true},renderer : function(v, p, record){
              var delivertContentText = record.get('deliveryContent');
              if (delivertContentText == 'Voice Script'){ 
                  return (new Ext.ux.CheckColumn()).renderer(v);
              }
            }},
        {header: 'Delay', dataIndex: 'delay',editor: {allowBlank: true}},
        {header: 'Action',
            xtype: 'actioncolumn',
            align: 'center',
            width: 50,
            sortable: false,
            items: [ {
                icon: 'extJs/images/icons/fam/add.gif',
                handler: function (grid, rowIndex, colIndex) {
                    rowEditing.cancelEdit();
                    var newRow = Ext.create('CallSequence',{
                            group: '1',
                            attempt: '7',
                            device: '',
                            channel: '',
                            deliveryContent: '',
                            delay: ''
                    });
                    callSequenceStore.insert(rowIndex+1, newRow);
                    grid.getSelectionModel().select(newRow);
                    rowEditing.startEdit(newRow, 0);
                    //rowEditing.startEdit(callSequenceStore.getAt(rowIndex+1),0);
                    //grid.editingPlugin.startEdit(rowIndex+1);
                }

            },{
                icon: 'extJs/images/icons/fam/delete.gif',
                handler: function (grid, rowIndex, colIndex) {
                    callSequenceStore.removeAt(rowIndex);
                }
            },{
                icon: 'extJs/images/icons/fam/iconEdit.gif',
                handler: function (grid, rowIndex, colIndex) {
                    rowEditing.startEdit(0,0);
                }
            }]
        }
    ]
});
});

Answer 1

Finally I am able to get this working by adding the following. clearListeners helped in clearing my event bubbling

rowEditing.startEdit(newRow,0);
rowEditing.clearListeners();

Answer 2

The method .startEdit is not used the same way for editing an existing row and the newly added row.

In the edit handler your call it with two integers : rowEditing.startEdit(0,0). This worked for me in my project.

In the add handler on the other hand, you call it with the record object rowEditing.startEdit(newRow, 0). Try calling it with the record index instead : rowEditing.startEdit(rowIndex + 1, 0).

While I'm not sure if this is the problem with your code, at least it is more consistent.