ExtJS grid cell editing

Question

I am using extjs 4 cell editing plugin with extjs grid. It's working fine with one grid but when I create a new grid on the same page which also require cell editing, exiting grid data vanishes. I have spent full day in diagnose the problem but in vain.

Following is the code for model, store and grids:

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

Just use different cell editing per grid
for example:

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

Answer 2

Try to add plugin on component init. This was helpful for me

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