我是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); }); });
答案 0 :(得分:3)
如果在同一页面上有两个可编辑的网格,则可以使用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]
答案 1 :(得分:0)
发现了问题。
columns : [
{
id : 'name',
列ID必须不同,即使它们位于不同的网格中