ExtJs two or more grids on same page - extjs

Question

I'm new with ExtJS.
I have two grids on a same page. First grid has 3 columns. Second only one. Problem is that when second is rendered, it is overwriting properties of the first grid.
For example when I try to edit row in first grid, it takes the width on the row from second grid.
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

The alternative to having your two grid id columns identified differently is to have two different instances/objects of the Ext.grid.plugin.RowEditing class if you have two editable grids on the same page. Many times it's important to have the same id.
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing');
plugins : [rowEditing]
plugins : [rowEditing2]

Answer 2

found the problem.
columns : [
{
id : 'name',
columns ids must be different, even if they are in diferent grids