Question

我正在使用带有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
        })]*/
});

Answer 1

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

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

Answer 2

尝试在组件init上添加插件。这对我很有帮助

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

ExtJS网格单元格编辑

2 个答案: