ExtJS列渲染器

Question

我的问题是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++; 
    } 
} 

该代码适于和删节。

这里是一个picture of the result：

通常在网格中的细胞应显示列表的计元素在我的商店。

任何人都可以帮助我了解我做错了什么吗？

Answer 1

的问题是：

在JavaScript中，函数封装这是在一个范围内定义以这样的方式自己之外的变量，他们有一个“活”的参考变量，而不是快照它在任何特定时间的价值。

Understanding variable capture by closures in Javascript/Node和 How do JavaScript closures work?

由于“C”或“计数器”使用“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](); 
}