开发者问题收集

ExtJS 网格中的行编辑

2014-01-15
8443

我是 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);
                }
            }]
        }
    ]
});
});
2个回答

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

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

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

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

Lorenz Meyer
2014-01-16

最后,我可以通过添加以下内容使其工作。 clearListeners 帮助清除我的事件冒泡

rowEditing.startEdit(newRow,0);
rowEditing.clearListeners();
user2192298
2014-01-21