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

我是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); }); }); 变量$booleanArray=[ ['denied'，'denied']， ['allowed'，'allowed'] ]; var myPageSize=10； setConfig（{enabled:true}）； 外部要求([ “Ext.grid.*”， “Ext.data.*”， “Ext.util.*”， “Ext.state.*” ]); Ext.onReady（函数（）{ Ext.define（'CharacteristicModel'{ 扩展：“Ext.data.Model”， 字段：[{name:'name'}，{name:'value'}，{name:'order'}]， 验证：[ { 键入：“长度”， 字段：“名称”， min:1 } ] }); var characteristicsStore=新的Ext.data.Store({ 代理：{ 型号：“CharacteristicModel”， 键入：“rest”， api:{ 读：admin_path+'/getCharacteristics/1/'， 创建：admin_path+'/saveCharacteristics/1/'， 更新：admin_path+/saveCharacteristics/1/， 销毁：管理路径+'/destroyCharacteristic/1/' }, 读者：{ 键入：“json”， root:'数据'， totalProperty:“总计数” }, 作者：{ 键入：“json”， root:“数据” }, 缓冲：真 }, 听众：{ 读：功能（响应）{ }, 加载：函数（存储）{ }, 写入：函数（存储、操作）{ store.load（）； } }, pageSize:myPageSize， 自动加载：{开始：0，限制：myPageSize}， 自动同步：正确 }); var rowEditing=Ext.create（'Ext.grid.plugin.rowEditing'）； var characteristicsGrid=新建Ext.grid.GridPanel({ id:“特征网格”， renderTo:“特征网格分区1”， 商店：特色商店， 宽度：480， 有状态的：是的， stateId:“特征网格”， 标题：“网格“1”， iconCls:“图标用户”， 听众：{ itemdblclick：函数（dv、行、项、索引、e）{ dv.refresh（）； dv.getGridColumns（）[0].setEditor({ 残疾人:对,， 可编辑：false }); if（row.data.id==6 | | row.data.id==7）{ dv.getGridColumns（）[1].setEditor({ xtype:'组合'， 存储：新Ext.data.ArrayStore({ 字段：['abbr'，'action']， 数据：$booleanArray }), displayField:'操作'， valueField:'缩写'， 模式：“本地”， typeAhead:false， 触发动作：“全部”， lazyRender:是的， emptyText:“选择操作” }); } else if（row.data.id==8 | | row.data.id==11）{ dv.getGridColumns（）[1].setEditor({ 残疾人:对,， 可编辑：false }); } 否则{ dv.getGridColumns（）[1].setEditor({ xtype:'textfield' }); } } }, 栏目：[ { id:'名称'， 文本：“账户特征”， 可排序：false， 宽度：340， 修正：对， 数据索引：“名称” }, { id:'值'， 文本：“值”， 可排序：false， dataIndex:'值'， 宽度：70， 修正：对， 编辑:{ xtype:'textfield' }, 渲染器：函数（值、字段）{ if（field.record.data.id==6 | | field.record.data.id==7）{ if（$booleanArray[0][0]！=value）{ 值=$booleanArray[1][1]； } 否则{ 值=$booleanArray[0][1]； } } 返回值； } }, { id:“订单”， 文本：“订单”， 可排序：false， 数据索引：“订单”， 宽度：70， 修正：对， 编辑:{ xtype:'textfield' }, 渲染器：函数（值、字段）{ 返回值； } } ], bbar:Ext.create（'Ext.PagingToolbar'{ 商店：特色商店， displayInfo:true， pageSize:myPageSize， displayMsg:'Show{0}-{1}з{2}'， emptyMsg：“0行” }), 摘要：[ { xtype:'工具栏'， 项目：[ { 文本：“添加”， iconCls:“图标添加”， 处理程序：函数（）{ var grid_columns=rowEditing.cmp.getSelectionModel（）.view.getGridColumns（）； 网格

columns    : [
        {
            id       : 'name',

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

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

plugins    : [rowEditing]

plugins    : [rowEditing2]