ExtJS Grid中的行編輯

Question

我是ExtJS的新手。

我想添加一行在我的extjs網格與處理程序關聯到我的一列中的圖像。我的行正在添加到指定的索引處，但它不會在編輯模式下自動打開。有人可以幫忙嗎？我不想用底座上的添加按鈕，如圖此鏈接（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

最後，我可以通過添加以下內容來獲得此工作。 clearListeners幫助清除我的事件冒泡

rowEditing.startEdit（newRow，0）; rowEditing.clearListeners（）;

Answer 2

方法.startEdit不用於編輯現有行和新添加的行以同樣的方式。

在編輯處理程序中，用兩個整數調用它：rowEditing.startEdit(0,0)。這在我的項目中爲我工作。

另一方面，在添加處理程序中，您使用記錄對象rowEditing.startEdit(newRow, 0)調用它。嘗試用記錄索引來調用它：rowEditing.startEdit(rowIndex + 1, 0)。

儘管我不確定這是否與代碼有關，但至少它更一致。