ExtJS 网格单元格编辑


ExtJS grid cell editing

我正在使用带有extjs网格的extjs 4单元格编辑插件。它在一个网格上工作正常,但是当我在同一页面上创建一个也需要单元格编辑的新网格时,退出的网格数据就会消失。 我花了一整天来诊断问题,但徒劳无功。

以下是模型、存储和网格的代码:

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
        })]*/
});

只需对每个网格
使用不同的单元格编辑,例如:

var cellEditing1 = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 2});
var cellEditing2 = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 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);
    }
});