我在向ext 3.4中的tabpanel动态添加标签时遇到了问题。以下是正在发生的事情的要点：
有人知道问题可能是什么吗？
我创建了以下plunk（我正在做的非常简单的版本）： 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);
});
提前感谢您的帮助。
我已经在chrome dev工具中验证了所有动态创建的选项卡都具有关联的正确网格ID，并且每个网格都在列模型中绑定了正确的storeId和正确的编辑器。
编辑：我做了一点小提琴，问题似乎是每个字段可以是一次只有1个网格的编辑器字段。例如，如果您在标签1上编辑字段1，然后在标签2上编辑字段2，则标签1上的字段2不可编辑，标签2上的字段1不可编辑。
答案 0 :(得分：0)
我今天经过无数次的修修补补后想通了。我采取了独立宣布一切的方法。最后，在扩展列模型时，我找到了问题的根源。这个插件证明了它！
定义和重新使用包含编辑器的列模型时似乎存在错误。对我来说，解决方法是简单地将它们定义到位，或者根据我已经定义的对象“新建”一个列模型对象。
Ext.onReady(function() {
Ext.util.Format.timefieldRenderer = function(format) {
return function(v) {
if (v instanceof Date) {
return v.format(format);
} else {
return v;
}
};
};
var createDate = function(H, M) {
var tmpDate = new Date();
tmpDate.setHours(H);
tmpDate.setMinutes(M);
return tmpDate;
}
var panel = new Ext.TabPanel({
id: 'tabPanelId',
activeTab: 0,
height: 300,
items: [{
title: 'Sunday',
items: new Ext.grid.EditorGridPanel({
id: 'sundayGrid',
xtype: 'editorgrid',
height: 300,
store: new Ext.data.JsonStore({
storeId: 'sundayStore',
data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
autoLoad: false,
fields: [{
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'
}]
}),
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
}
}]
}),
border: false,
clicksToEdit: 1
})
}, {
title: 'Monday',
items: new Ext.grid.EditorGridPanel({
id: 'mondayGrid',
xtype: 'editorgrid',
height: 300,
store: new Ext.data.JsonStore({
storeId: 'mondayStore',
data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
autoLoad: false,
fields: [{
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'
}]
}),
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
}
}]
}),
border: false,
clicksToEdit: 1
})
}, {
title: 'Tuesday',
items: new Ext.grid.EditorGridPanel({
id: 'tuesdayGrid',
xtype: 'editorgrid',
height: 300,
store: new Ext.data.JsonStore({
storeId: 'tuesdayStore',
data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
autoLoad: false,
fields: [{
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'
}]
}),
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
}
}]
}),
border: false,
clicksToEdit: 1
})
}, {
title: 'Wednesday',
items: new Ext.grid.EditorGridPanel({
id: 'wednesdayGrid',
xtype: 'editorgrid',
height: 300,
store: new Ext.data.JsonStore({
storeId: 'wednesdayStore',
data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
autoLoad: false,
fields: [{
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'
}]
}),
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
}
}]
}),
border: false,
clicksToEdit: 1
})
}, {
title: 'Thursday',
items: new Ext.grid.EditorGridPanel({
id: 'thursdayGrid',
xtype: 'editorgrid',
height: 300,
store: new Ext.data.JsonStore({
storeId: 'thursdayStore',
data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
autoLoad: false,
fields: [{
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'
}]
}),
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
}
}]
}),
border: false,
clicksToEdit: 1
})
}, {
title: 'Friday',
items: new Ext.grid.EditorGridPanel({
id: 'fridayGrid',
xtype: 'editorgrid',
height: 300,
store: new Ext.data.JsonStore({
storeId: 'fridayStore',
data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
autoLoad: false,
fields: [{
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'
}]
}),
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
}
}]
}),
border: false,
clicksToEdit: 1
})
}, {
title: 'Saturday',
items: new Ext.grid.EditorGridPanel({
id: 'saturdayGrid',
xtype: 'editorgrid',
height: 300,
store: new Ext.data.JsonStore({
storeId: 'saturdayStore',
data: [{"StartTimeHours":0,"StartTimeMinutes": 0,"EndTimeHours":0,"EndTimeMinutes":0}],
autoLoad: false,
fields: [{
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'
}]
}),
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
}
}]
}),
border: false,
clicksToEdit: 1
})
}],
renderTo: Ext.getBody()
});
Ext.getCmp('tabPanelId').setActiveTab(0);
});