ExtJs 同一页面上的两个或多个网格

Question

我是 ExtJS 的新手。

我在同一个页面上有两个网格。第一个网格有 3 列。第二个只有一个。问题是当第二个被呈现时，它会覆盖第一个网格的属性。

例如，当我尝试编辑第一个网格中的行时，它采用第二个网格中行的宽度。

var $booleanArray = [    ['denied', 'Denied'],    ['allowed', 'Allowed']];var myPageSize = 10;Ext.Loader.setConfig({ enabled: true });Ext.require([    'Ext.grid.*',    'Ext.data.*',    'Ext.util.*',    'Ext.state.*']);Ext.onReady(function () {    Ext.define('CharacteristicModel', {        extend: 'Ext.data.Model',        fields: [ {name: 'name'}, {name: 'value'}, {name: 'order'} ],        validations: [            {                type : 'length',                field: 'name',                min  : 1            }        ]    });    var characteristicsStore = new Ext.data.Store({        proxy    : {            model   : 'CharacteristicModel',            type    : 'rest',            api     : {                read   : admin_path + '/getCharacteristics/1/',                create : admin_path + '/saveCharacteristics/1/',                update : admin_path + '/saveCharacteristics/1/',                destroy: admin_path + '/destroyCharacteristic/1/'            },            reader  : {                type         : 'json',                root         : 'data',                totalProperty: 'total_count'            },            writer  : {                type: 'json',                root: 'data'            },            buffered: true        },        listeners: {            read : function (response) {            },            load : function (store) {            },            write: function (store, operation) {                store.load();            }        },        pageSize : myPageSize,        autoLoad : { start: 0, limit: myPageSize },        autoSync : true    });    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');    var characteristicsGrid = new Ext.grid.GridPanel({        id         : 'characteristicsGrid',        renderTo   : 'characteristics_grid_div_1',        store      : characteristicsStore,        width      : 480,        stateful   : true,        stateId    : 'characteristicsGrid',        title      : 'Grid "1"',        iconCls    : 'icon-user',        listeners  : {            itemdblclick: function (dv, row, item, index, e) {                dv.refresh();                dv.getGridColumns()[0].setEditor({                    disabled: true,                    editable: false                });                if (row.data.id == 6 || row.data.id == 7) {                    dv.getGridColumns()[1].setEditor({                        xtype        : 'combo',                        store        : new Ext.data.ArrayStore({                            fields: ['abbr', 'action'],                            data  : $booleanArray                        }),                        displayField : 'action',                        valueField   : 'abbr',                        mode         : 'local',                        typeAhead    : false,                        triggerAction: 'all',                        lazyRender   : true,                        emptyText    : 'Select action'                    });                }                else if (row.data.id == 8 || row.data.id == 11) {                    dv.getGridColumns()[1].setEditor({                        disabled: true,                        editable: false                    });                }                else {                    dv.getGridColumns()[1].setEditor({                        xtype: 'textfield'                    });                }            }        },        columns    : [            {                id       : 'name',                text     : 'Account characteristic',                sortable : false,                width    : 340,                fixed    : true,                dataIndex: 'name'            },            {                id       : 'value',                text     : 'Value',                sortable : false,                dataIndex: 'value',                width    : 70,                fixed    : true,                editor   : {                    xtype: 'textfield'                },                renderer : function (value, field) {                    if (field.record.data.id == 6 || field.record.data.id == 7) {                        if ($booleanArray[0][0] != value) {                            value = $booleanArray[1][1];                        }                        else {                            value = $booleanArray[0][1];                        }                    }                    return value;                }            },            {                id       : 'order',                text     : 'Order',                sortable : false,                dataIndex: 'order',                width    : 70,                fixed    : true,                editor   : {                    xtype: 'textfield'                },                renderer : function (value, field) {                    return value;                }            }        ],        bbar       : Ext.create('Ext.PagingToolbar', {            store      : characteristicsStore,            displayInfo: true,            pageSize   : myPageSize,            displayMsg : 'Show {0} - {1} из {2}',            emptyMsg   : "0 rows"        }),        dockedItems: [            {                xtype: 'toolbar',                items: [                    {                        text   : 'Add',                        iconCls: 'icon-add',                        handler: function () {                            var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();                            grid_colums[0].setEditor({                                xtype        : 'combo',                                store        : new Ext.data.ArrayStore({                                    fields: ['id', 'name'],                                    data  : $characteristics                                }),                                displayField : 'name',                                valueField   : 'id',                                mode         : 'local',                                typeAhead    : false,                                triggerAction: 'all',                                lazyRender   : true,                                emptyText    : 'Select action'                            });                            grid_colums[1].setEditor({                                xtype: 'textfield'                            });                            // empty record                            //characteristicsStore.autoSync = false;                            characteristicsStore.insert(0, new CharacteristicModel());                            rowEditing.startEdit(0, 0);                            //characteristicsStore.autoSync = true;                        }                    },                    '-',                    {                        itemId  : 'delete',                        text    : 'Delete',                        iconCls : 'icon-delete',                        disabled: true,                        handler : function () {                            var selection = characteristicsGrid.getView().getSelectionModel().getSelection()[0];                            if (selection) {                                characteristicsStore.remove(selection);                            }                        }                    }                ]            }        ],        plugins    : [rowEditing]    });    characteristicsGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {        characteristicsGrid.down('#delete').setDisabled(selections.length === 0);    });});Ext.onReady(function () {    Ext.define('AdvantagesModel', {        extend: 'Ext.data.Model',        fields: [            {name: 'name'}        ]    });    // setup the state provider, all state information will be saved to a cookie    //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));    var advantagesStore = new Ext.data.Store({        idProperty: 'AdvantagesModel',        proxy    : {            model   : 'AdvantagesModel',            type    : 'rest',            api     : {                read   : admin_path + '/getAdvantages/1/',                create : admin_path + '/saveAdvantages/1/',                destroy: admin_path + '/destroyAdvantages/1/'            },            reader  : {                type         : 'json',                root         : 'data',                totalProperty: 'totalCount'            },            writer  : {                type: 'json',                root: 'data'            },            buffered: true        },        listeners: {            read : function (response) {            },            load : function (store) {            },            write: function (store, operation) {                store.load();            }        },        pageSize : myPageSize,        autoLoad : { start: 0, limit: myPageSize },        autoSync : true    });    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');    var advantagesGrid = new Ext.grid.GridPanel({        id         : 'advantagesGrid',        renderTo   : 'advantages_grid_div_1',        store      : advantagesStore,        width      : 482,        height     : 355,        stateful   : true,        stateId    : 'advantagesGrid',        title      : 'Grid 2',        iconCls    : 'icon-user',        listeners  : {            beforeedit: function (dv, row, item) {                //advantagesGrid.getView().refresh();                if (row.record.raw)                {                    return false;                }            }        },        columns    : [            {                id       : 'name',                text     : 'Advantages',                sortable : false,                dataIndex: 'name',                width    : 480            }        ],        bbar       : Ext.create('Ext.PagingToolbar', {            store      : advantagesStore,            displayInfo: true,            pageSize   : myPageSize,            displayMsg : 'Show {0} - {1} из {2}',            emptyMsg   : "0 rows"        }),        dockedItems: [            {                xtype: 'toolbar',                items: [                    {                        text   : 'Add',                        iconCls: 'icon-add',                        handler: function () {                            var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns();                            grid_colums[0].setEditor({                                xtype        : 'combo',                                store        : new Ext.data.ArrayStore({                                    fields: ['id', 'name'],                                    data  : $advantages                                }),                                displayField : 'name',                                valueField   : 'id',                                mode         : 'local',                                typeAhead    : false,                                triggerAction: 'all',                                lazyRender   : true,                                emptyText    : 'Select action'                            });                            // empty record                            advantagesStore.autoSync = false;                            advantagesStore.insert(0, new AdvantagesModel());                            rowEditing.startEdit(0, 0);                            advantagesStore.autoSync = true;                        }                    },                    '-',                    {                        itemId  : 'delete',                        text    : 'Delete',                        iconCls : 'icon-delete',                        disabled: true,                        handler : function () {                            var selection = advantagesGrid.getView().getSelectionModel().getSelection()[0];                            if (selection) {                                advantagesStore.remove(selection);                            }                        }                    }                ]            }        ],        plugins    : [rowEditing]    });    advantagesGrid.getSelectionModel().on('selectionchange', function (selModel, selections) {        advantagesGrid.down('#delete').setDisabled(selections.length === 0);    });});

Answer 1

如果您在同一页面上有两个可编辑的网格，则让您的两个网格 ID 列以不同方式标识的替代方法是使用 Ext.grid.plugin.RowEditing 类的两个不同实例/对象。很多时候拥有相同的 ID 很重要。

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing');

plugins    : [rowEditing]

plugins    : [rowEditing2]