ExtJS列渲染器

Question

我的问题是ExtJS 4中GridPanel中列的渲染器函数。渲染器的记录应该从我的存储中加载列表的一个元素，并且确实加载了；但它总是加载列表的相同元素。

以下是我代码的相关片段。

首先是我的Store：

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++;
    }
}

代码已经进行了改编和删节。

这是一个结果的图片：

通常情况下，网格中的单元格应该显示我存储在列表中的元素的计数。

有人能帮助我理解我做错了什么吗？

- FlorianQo

---

抱歉格式不好 - FlorianQo

我不清楚你在这里如何配置GridPanel，但显然c不是你期望的。也许你可以用另一种方式管理'c'？-你似乎只有一个记录在你的存储中，所以也许你可以从传递给渲染器的其他值推断'c'？例如，传递的第四个参数是“rowIndex”，第五个参数是“colIndex”，所以类似c =（rowIndex）* 7 + colIndex + 1;（假设你总是有七天一行）？ - pherris

我的商店中有更多的记录，这取决于员工数量。一行中有超过7天。这取决于一个月的长度。 - FlorianQo

Answer 1

问题是：

在JavaScript中，函数将在其外部定义的变量包含在内部，以便它们具有对该变量的“活动”引用，而不是某个特定时间点的值快照。需要理解闭包（Closure）才能很好地掌握这个概念。当使用“c”时，“c”或“counter”已经完全增加，因此“c”的值始终是在for循环中达到的最高值。要解决这个问题，您需要在创建渲染器函数的时候捕获“c”的值。以下代码说明了该问题以及如何捕获该值以实现所需的效果： 了解Javascript/Node中闭包的变量捕捉 和 JavaScript闭包如何工作？

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]();
}

- pherris

---

没错。另一种说法是，c被所有不同的渲染器共享。 - Ruan Mendes