我的问题是ExtJS 4中GridPanel中列的渲染器功能.渲染器的记录应该从我的商店加载我的列表元素,它确实如此;但它总是加载列表中的相同元素.
以下是我的代码的相关摘要.
首先是我的商店:
var nStore = Ext.create('Ext.data.Store', {
storeId: 'people',
fields: ['team', 'name', 'liste', 'sums'],
data: [{
team: 'TestTeam', name: 'TestPerson',
liste: ['F', 'F', 'F', 'S', 'N', 'F', 'S',
'S', 'S', 'F', 'F', 'F', 'S', 'A', 'N',
'S', 'S', 'S', 'S', '', '', 'N', 'N',
'N', 'S', 'S', 'N', 'S', 'F', 'N', 'N'],
sums: [[7, 4, 0, 0, 0, 0, 0], [3, 0, 0, 0, 0]]
}]
});
然后是渲染器所在的列数组:
var counter = 0;
for (var i = 0; i < Object.kws.length; i++) {
var DayOfMonth = [];
var DayOfWeek = [];
for (var j = 0; j < Object.kws[i].kwDays.length; j++) {
var c = counter;
DayOfMonth[j] = {
text: '<span style="font-size: 87%;">'
+ Object.kws[i].kwDays[j].day
+ '.<br>'
+ Object.kws[i].kwDays[j].dayOfWeek
+ '.</span>', sortable: false,
draggable: false, menuDisabled: true,
resizable: false, width: 40, align: 'center',
renderer: function (value, meta, record) {
return record.data.liste[c];
}
};
counter++;
}
}
代码经过调整和删节.
通常,网格中的单元格应显示我的商店中列表的计数元素.
谁能帮助我理解我做错了什么?
解决方法:
问题是:
In JavaScript, functions enclose variables which were defined in a scope outside of their own in such a way that they have a “living” reference to the variable, not a snapshot of its value at any particular time.
Understanding variable capture by closures in Javascript/Node和
How do JavaScript closures work?
由于’c’或’counter’在调用使用’c’的方法之前完全递增,因此’c’的值始终是for循环中实现的最高值.要解决此问题,您需要在创建渲染器功能的时间点捕获“c”的值.此代码说明了问题以及如何捕获值以实现所需的效果:
var counter = 0;
var dayOfMonths = [];
var dayOfMonthCaptured = [];
for (var i = 0; i < 10; i++) {
var c = counter;
console.log(c);
dayOfMonths.push(function () {
var index = c;
//since counter is incremented fully before this method is called, you get the last value
console.log(index);
});
//here we pass the current value of c to a new function and capture its current value
dayOfMonthCaptured.push((function (index) {
return function () {
console.log(index);
};
})(c));
counter++;
}
//this won’t work
for (day in dayOfMonths) {
dayOfMonths[day]();
}
console.log("—————————");
for (day in dayOfMonthCaptured) {
dayOfMonthCaptured[day]();
}