I have been encountering a problem when dynamically adding tabs to a tabpanel in ext 3.4. Here is the gist of what is going on:
- create tab panel
- add tabs with editor grid panel with proper editor defined in column model
- editor is bound to some fields on some tabs, but not all fields on all tabs
Anybody know what the issue might be?
I created the following plunk (very simple version of what I'm actually doing): Fiddle Here
Ext.onReady(function() {
var scheduleRec = {
"Sunday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
"Monday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
"Tuesday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
"Wednesday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
"Thursday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
"Friday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
"Saturday":[{"StartTimeHours":0,"StartTimeMinutes":0,"EndTimeHours":0,"EndTimeMinutes":0}],
};
//Build a schedule array...
scheduleArray = [];
if (scheduleRec) {
for (srec in scheduleRec) {
if (scheduleRec.hasOwnProperty(srec)) {
if (typeof scheduleRec[srec] === 'object' && srec !== 'HolidaySets') {
scheduleArray.push([srec, scheduleRec[srec]]);
}
}
}
}
// simple array store
var comboStore = new Ext.data.ArrayStore({
fields: ['day', 'schedule'],
data: scheduleArray
});
var fm = Ext.form;
Ext.util.Format.timefieldRenderer = function(format) {
return function(v) {
if (v instanceof Date) {
return v.format(format);
} else {
return v;
}
};
};
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
header: 'Start Time',
dataIndex: 'StartTime',
format: 'H:i',
width: 75,
renderer: Ext.util.Format.timefieldRenderer('H:i'),
editor: {
xtype: 'timefield',
format: 'H:i',
increment: 1
}
}, {
header: 'End Time',
dataIndex: 'EndTime',
format: 'H:i',
width: 75,
renderer: Ext.util.Format.timefieldRenderer('H:i'),
editor: {
xtype: 'timefield',
format: 'H:i',
increment: 1
}
}]
});
var createDate = function(H, M) {
var tmpDate = new Date();
tmpDate.setHours(H);
tmpDate.setMinutes(M);
return tmpDate;
}
var gridStoreFields = [{
name: 'StartTime',
type: 'date',
convert: function(v, rec) {
var tmpDate = createDate(rec.StartTimeHours, rec.StartTimeMinutes);
return tmpDate;
}
}, {
name: 'EndTime',
type: 'date',
convert: function(v, rec) {
var tmpDate = createDate(rec.EndTimeHours, rec.EndTimeMinutes)
return tmpDate;
},
format: 'H:i'
}];
var gridStore = new Ext.data.JsonStore({
autoLoad: false,
fields: gridStoreFields
});
var panel = new Ext.TabPanel({
id: 'tabPanelId',
activeTab: 0,
height: 300,
renderTo: Ext.getBody()
});
comboStore.each(function(records) {
var theDay = records.get('day');
var newStore = new Ext.data.JsonStore({
storeId: theDay + 'Store',
data: records.get('schedule'),
autoLoad: false,
fields: gridStoreFields
});
var newGrid = new Ext.grid.EditorGridPanel({
id: theDay + 'Grid',
xtype: 'editorgrid',
height: 300,
store: newStore,
cm: cm,
border: false,
clicksToEdit: 1
});
Ext.getCmp('tabPanelId').add({
title: theDay,
items: newGrid
});
});
Ext.getCmp('tabPanelId').setActiveTab(0);
});
Thanks in advance for your help.
I've verified in chrome dev tools that all of the dynamically created tabs have the correct grid id associated and that each grid has the correct storeId and correct editor bound in the column model.
EDIT: I did a little playing around with the fiddle, the problem appears to be that each field can be an editor field on exactly 1 grid at a time. For instance, if you edit field 1 on tab 1 and then edit field 2 on tab 2, field 2 is not editable on tab 1 and field 1 is not editable on tab 2.
