Редактор столбцов ExtJS

Question

Моя проблема - функция рендеринга столбца в GridPanel в ExtJS 4. Запись рендеринга должна загружать элемент из моего списка из моего магазина, и он это делает; но он всегда загружает один и тот же элемент списка.

Ниже приведены соответствующие фрагменты кода.

Первый мой магазин:

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» в момент создания вашей функции визуализации. Этот код иллюстрирует проблему и как захватить значение для достижения желаемого эффекта:

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