ExtJS Duplicating Column Headers in a Grid
I want to have a grid that allows duplicate column names but contains different data. Apparently this is causing a conflict and the double named column just copies the data from the first column and moves the other data.
This is what I mean. I have a column "FirstName" which I want to rename to "Login":
I'll rename it, but the "Input" already exists and it 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", "lstone2@toplist.cz", "Male"],["3000010033", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "2", "Karen", "Dean", "kdean1@ovh.net", "Female"],["3000010034", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "4", "Marie", "Carter", "mcarter3@jiathis.com", "Female"],["3000010035", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "6", "Lawrence", "Richardson", "lrichardson5@ovh.net", "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 are myData
dynamically generated. When I rename a column, the rename function returns a different array columnNames
.
I doubt this is an ExtJS issue, but it doesn't make sense not to use duplicate names in the table.
My question is, am I doing something wrong (for example, a property is missing), or should I go with a workaround to fix this?
I am using ExtJS 4.0.7
source to share
ExtJS binds your data to a column with a field dataIndex
. But you set the same dataIndex
in your two columns. This is why you have the same data in two columns.
Just use one array to set text
your column and another to setdataIndex
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", "lstone2@toplist.cz", "Male"],["3000010033", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "2", "Karen", "Dean", "kdean1@ovh.net", "Female"],["3000010034", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "4", "Marie", "Carter", "mcarter3@jiathis.com", "Female"],["3000010035", "2017-04-25 09:11:47.2600000", "Administrator", "I", "2017-04-25 09:11:47.3570000", "COMMITTED", "6", "Lawrence", "Richardson", "lrichardson5@ovh.net", "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);
source to share