Search code examples
extjsgridduplicatesextjs4

ExtJS Duplicate Column Headers Conflict in Grid

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": enter image description here

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

enter image description here

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

Solution

  • 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);