Row Editing in ExtJS Grid

0
votes

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);
                }
            }]
        }
    ]
});
});
2
extjsextjs4extjs4.2
Could you show the code for callSequenceStore and rowEditing? – forgivenson
What version of ext are you using? I made a Sencha fiddle using your code, using Ext 4.2.1, and it does open row editing mode, but it doesn't focus on the first textfield. – forgivenson
I am using ext-js version 4.2.2 – user2192298
Well, the example you linked is for 4.1. I checked the same example in 4.2, and it doesn't auto focus on the textfields either. But it does open the editor, so I'm not sure why yours isn't working. – forgivenson
I don't want my current row to open in edit mode. I want my new row which got added just below the current row in edit mode – user2192298

2 Answers

1
votes

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.

1
votes

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();