ExtJS 网格中的行编辑

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

.startEdit 方法用于编辑现有行和新添加的行的方式不同。

在编辑处理程序中，您使用两个整数调用它：rowEditing.startEdit(0,0)。这在我的项目中对我有用。

另一方面，在添加处理程序中，您使用记录对象rowEditing.startEdit(newRow, 0) 调用它。尝试使用记录索引调用它：rowEditing.startEdit(rowIndex + 1, 0)。

虽然我不确定这是否是您的代码的问题，但至少它更加一致。

Answer 2

最后，我可以通过添加以下内容来完成这项工作。 clearListeners 帮助清除了我的事件冒泡

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