ExtJS 网格单元格编辑答案

【问题标题】：ExtJS grid cell editingExtJS 网格单元格编辑
【发布时间】：2011-05-18 14:18:31
【问题描述】：

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

【问题讨论】：

尝试为其他网格面板制作另一个单元格编辑。
您找到解决方案了吗？我也面临同样的问题。
也面临同样的问题，呃

标签： php extjs4

【解决方案1】：

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

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

【讨论】：

【解决方案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);
    }
});

【讨论】：