Редактирование ячейки сетки ExtJS

Question

Я использую плагин редактирования extjs 4 cell с сеткой extjs. Он работает отлично с одной сеткой, но когда я создаю новую сетку на той же странице, которая также требует редактирования ячейки, выход из данных сетки исчезает. Я потратил целый день на диагностику проблемы, но напрасно.

Ниже приводится код для модели, магазина и сеток:

Ext.define('site', { 
    extend: 'Ext.data.Model', 
    fields: [{ 
     name: 'siteid' 
    }, { 
     name: 'description' 
    }, { 
     name: 'picevd' 
    }, { 
     name: 'Dateofaudit', 
     type: 'date', 
     dateFormat: 'Y-m-d' 
    }, { 
     name: 'dateofrecord', 
     type: 'date' 
    }, { 
     name: 'id' 
    }] 
}); 

Ext.define('d696', { 
    extend: 'Ext.data.Model', 
    fields: [{ 
     name: 'siteid' 
    }, { 
     name: 'description' 
    }, { 
     name: 'picevd' 
    }, { 
     name: 'Dateofaudit', 
     type: 'date', 
     dateFormat: 'Y-m-d' 
    }, { 
     name: 'dateofrecord', 
     type: 'date' 
    }, { 
     name: 'id' 
    }] 
}); 

var Dstore = Ext.create('Ext.data.Store', { 
    //autoDestroy: true, 
    storeId: 'Dstore', 
    autoLoad: true, 
    model: 'site', 
    proxy: { 
     url: '../server/sitetheftgrid.php?TYPE=SITE', 
     type: 'ajax', 
     reader: { 
      type: 'json', 
      root: 'results' 
     } 
    }, 
    sorters: [{ 
     property: 'Dateofaudit', 
     direction: 'ASC' 
    }] 
}); // END Dstore 

Ext.create('Ext.data.Store', { 
    //autoDestroy: true, 
    storeId: 'a', 
    model: 'd696', 
    proxy: { 
     url: '../server/sitetheftgrid.php', 
     type: 'ajax', 
     reader: { 
      type: 'json', 
      root: 'results' 
     } 
    } 
    //sorters: [{property: 'Dateofaudit',direction:'ASC'}]           
}); // END Dstore 

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { 
    clicksToEdit: 2 
}); 

var grid = Ext.create('Ext.grid.Panel', { 
    store: Dstore, 
    columns: [{ 
     id: 'siteid', 
     header: 'Site Id', 
     dataIndex: 'siteid', 
     width: 100, 
     field: { 
      allowBlank: false 
     } 
    }, { 
     header: 'Detail', 
     dataIndex: 'description', 
     flex: 1, 
     field: { 
      allowBlank: false 
     } 
    }, { 
     header: 'Date Of Audit', 
     dataIndex: 'Dateofaudit', 
     width: 150, 
     field: { 
      xtype: 'datefield', 
      format: 'm/d/y' 
     } 
    }, { 
     header: 'Date Of Record', 
     dataIndex: 'dateofrecord', 
     width: 150 
    }], 
    width: '100%', 
    height: 300, 

    id: 'sitegrid', 
    frame: true, 
    plugins: [cellEditing] 
}); 


var stor = Ext.data.StoreManager.lookup('a'); 


Ext.create('Ext.grid.Panel', { 
    store: stor, 
    columns: [{ 
     header: 'Site Id', 
     dataIndex: 'siteid1', 
     width: 100, 
     field: { 
      allowBlank: false 
     } 
    }, { 
     header: 'Detail', 
     dataIndex: 'description2', 
     flex: 1, 
     field: { 
      allowBlank: false 
     } 
    }, { 
     header: 'Date Of Audit', 
     dataIndex: 'Dateofaudit4', 
     width: 150, 
     field: { 
      xtype: 'datefield', 
      format: 'm/d/y' 
     } 
    }, { 
     header: 'Date Of Record', 
     dataIndex: 'dateofrecord2', 
     width: 150 
    }], 
    width: '100%', 
    height: 300, 
    id: 'sitegrid2', 
    frame: true, 
    autoScroll: true, //when i uncomment this data in first grid vanishes 
    /* plugins:[ Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1 
     })]*/ 
}); 

Answer 1

Просто использовать различные редактирования клеток на сетке
, например:

var cellEditing1 = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 2}); 
var cellEditing2 = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 2}); 

Answer 2

Попробуйте добавить плагин на компонент инициализации. Это было полезно для меня

Ext.create('Ext.grid.Panel', { 
    store: stor, 
    columns: [{ 
     header: 'Site Id', 
     dataIndex: 'siteid1', 
     width: 100, 
     field: { 
      allowBlank: false 
     } 
    }, { 
     header: 'Detail', 
     dataIndex: 'description2', 
     flex: 1, 
     field: { 
      allowBlank: false 
     } 
    }, { 
     header: 'Date Of Audit', 
     dataIndex: 'Dateofaudit4', 
     width: 150, 
     field: { 
      xtype: 'datefield', 
      format: 'm/d/y' 
     } 
    }, { 
     header: 'Date Of Record', 
     dataIndex: 'dateofrecord2', 
     width: 150 
    }], 
    width: '100%', 
    height: 300, 
    id: 'sitegrid2', 
    frame: true, 
    autoScroll: true, 
    initComponent: function() { 
     this.plugins = [Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     })]; 

     this.callParent(arguments); 
    } 
});