ExtJS Duplicate Column Headers Conflict in Grid

Question

I want to have a grid that allows duplicate column names, but to contain different data. Apparently this causes a conflict and the column with duplicate name just copy the data from the first column and moves the other data.

Here is what i mean. I have a column "FirstName" that i want to rename to "Login":

I rename it, but "Login" already exists and this happens:

My store is added dynamically to the grid like this:

var columnNames = ["RecordID", "RowDateModified", "Login", "ActionType", "DateModified", "RawDataSetSyncDiscardedType", "ID", "FirstName", "LastName", "Email", "Gender"]
var myData = [["3000010032", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "3", "Lawrence", "Stone", "[email protected]", "Male"],["3000010033", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "2", "Karen", "Dean", "[email protected]", "Female"],["3000010034", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "4", "Marie", "Carter", "[email protected]", "Female"],["3000010035", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "6", "Lawrence", "Richardson", "[email protected]", "Male"]]

dataStore = Ext.create('Ext.data.ArrayStore', {
fields: columnNames,
data: myData
});

for (var i = 0; i < columnNames.length; i++) {
columnsArr.push({
    text: columnNames[i],
    sortable: true,
    forceFit: true,
    minWidth: 150,
    dataIndex: columnNames[i]
});
}

grid.reconfigure(dataStore, columnsArr);

EDIT: columnNames and myData are dynamically generated. When I rename a column, the renaming function returns different columnNames array.

I'm doubting that this is ExtJS problem, but it doesn't make sense to not be able to use duplicate names in a table.

My question is Am I doing something wrong (like missing a property) or I should go with some workaround to solve this?

I'm using ExtJS 4.0.7

But you have not shown the code how you are renaming the column name? — Ankit Chaudhary
@ankitchaudhary Actually columnNames is dynamically populated and when I rename something it just return different array. I think the renaming function is not related, that's why i didn't post it. Though, I will clarify in my question that columnNames is dynamically generated data. — nyagolova
Oh..then you cannot use same array to map text and dataindex. As text means what is column name and dataIndex means which field value should be shown. So its not a ExtJs problem. Do you always have to rename FirstName to login? — Ankit Chaudhary
Well yeah, but not necessarily - It might be any other column. The user is not prevented in renaming the columns. — nyagolova

Ludovic Feltz Ludovic Feltz · Accepted Answer · 2017-04-25T09:45:59

ExtJS bind your data to your column with the dataIndex field. But you setted the same dataIndex to your two columns. Thats is why you have the same data in your two columns.

Just use one array to set the text of your column and another one to set the dataIndex

var columnNames = ["RecordID", "RowDateModified", "Login", "ActionType", "DateModified", "RawDataSetSyncDiscardedType", "ID", "Login", "LastName", "Email", "Gender"];
var columnDataIndexes = ["RecordID", "RowDateModified", "Login", "ActionType", "DateModified", "RawDataSetSyncDiscardedType", "ID", "FirstName", "LastName", "Email", "Gender"]
var myData = [["3000010032", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "3", "Lawrence", "Stone", "[email protected]", "Male"],["3000010033", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "2", "Karen", "Dean", "[email protected]", "Female"],["3000010034", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "4", "Marie", "Carter", "[email protected]", "Female"],["3000010035", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "6", "Lawrence", "Richardson", "[email protected]", "Male"]]

dataStore = Ext.create('Ext.data.ArrayStore', {
fields: columnDataIndexes,
data: myData
});

for (var i = 0; i < columnNames.length; i++) {
columnsArr.push({
    text: columnNames[i], // <<== Column names array
    sortable: true,
    forceFit: true,
    minWidth: 150,
    dataIndex: columnDataIndexes[i] // <<== Different array here (dataIndexes)
});
}

grid.reconfigure(dataStore, columnsArr);

ExtJS Duplicate Column Headers Conflict in Grid

1 Answers