Extjs 4.1.1a Контрольный символ флажка на панели сетки не работает

Question

на панели вкладок Я создаю вкладку для каждого года, который у меня есть в базе данных (в этом случае база данных содержит в данный момент только 3 года: 2012, 2013 и 2014), и, наконец, я установил активную вкладку в текущем году (2013). В контроллере я делаю следующее:

var tp= this.getTpOverview(); 

this.getPlannedYearsStore().load({ 
    callback: function(records) {   
     for (i=0; i< records.length; i++){ 
      var year = records[i].data.year; 

      var tab = tp.add({ 
      title: year, 
      year: year, 
      layout:'fit', 
      listeners: { 
       activate: function() { 
        var tbOverview = Ext.getCmp('tabOverview-'+ this.year); 
         if (!tbOverview) { 
          var gridOverview = Ext.create('WLPT.view.CPAssMonthActHours', { 
           id: 'tabOverview-' + this.year, 
           year: this.year, 
           xtype: 'cpassmonthacthoursview', 
           autoScroll: true 
          }); 
          this.add(gridOverview);          
         } else { 
          selectedYear = this.year; 
          tbOverview.getStore().load({ 
           params : { 
            wrk_year: selectedYear 
           } 
          }); 
         }         
        }        
       } 
      }); 
      if (currentYear == parseInt(records[i].data.year)) { 
       tab2Activate = tab; 
      } 
     } 
     tp.setActiveTab(tab2Activate); 
    } 
}); 

При запуске приложения эти швы работают нормально.

Я забыл сказать, что каждой вкладка содержит панель сетки с контрольной колонкой (Флажок модель) и для каждого элемента (строки) редактор ячейки выставиться на отдельные клетки.

Активная вкладка (2013) работает нормально. Я могу проверить флажки, чтобы перенести сумму выбранных элементов. Действительно, редактор ячеек работает нормально.

Проблема возникает, когда я меняю вкладку. Соответствующая сетка поставляется с столбцом флажка. Но на консоли javascript появляется следующее сообщение об ошибке:

Uncaught TypeError: Cannot call method 'setWidth' of undefined ext-all-debug.js:95689 
Ext.define.onColumnResize ext-all-debug.js:95689 
Ext.define.onColumnResize ext-all-debug.js:101362 
Ext.util.Event.Ext.extend.fire ext-all-debug.js:8896 
Ext.define.continueFireEvent ext-all-debug.js:9102 
Ext.define.fireEvent ext-all-debug.js:9080 
Ext.override.fireEvent ext-all-debug.js:51104 
Ext.define.onHeaderResize ext-all-debug.js:97344 
Ext.define.afterComponentLayout ext-all-debug.js:98063 
Ext.define.notifyOwner ext-all-debug.js:28381 
Ext.define.callLayout ext-all-debug.js:103511 
Ext.define.flushLayouts ext-all-debug.js:103680 
Ext.define.runComplete ext-all-debug.js:104194 
callOverrideParent ext-all-debug.js:54 
Base.implement.callParent ext-all-debug.js:3813 
Ext.override.runComplete ext-all-debug.js:21234 
Ext.define.run ext-all-debug.js:104175 
Ext.define.statics.flushLayouts ext-all-debug.js:21238 
Ext.define.statics.resumeLayouts ext-all-debug.js:21246 
Ext.resumeLayouts ext-all-debug.js:23343 
Ext.define.setActiveTab ext-all-debug.js:111589 
Ext.define.onClick ext-all-debug.js:111357 
(anonymous function) 
Ext.apply.createListenerWrap.wrap 

Несмотря на это, сетка отображается правильно. Но, когда я выбираю пункт повестки дня, Консоль JavaScript показывает следующее сообщение об ошибке:

Uncaught TypeError: Cannot call method 'up' of null ext-all-debug.js:99591 
Ext.define.onRowFocus ext-all-debug.js:99591 
Ext.util.Event.Ext.extend.fire ext-all-debug.js:8896 
Ext.define.continueFireEvent ext-all-debug.js:9102 
Ext.define.fireEvent ext-all-debug.js:9080 
Ext.override.fireEvent ext-all-debug.js:51104 
Ext.define.focusRow ext-all-debug.js:92462 
Ext.define.onRowFocus ext-all-debug.js:92423 
Ext.define.onLastFocusChanged ext-all-debug.js:109495 
Ext.define.setLastFocused ext-all-debug.js:83855 
Ext.define.doMultiSelect ext-all-debug.js:83761 
Ext.define.doSelect ext-all-debug.js:83721 
Ext.define.selectWithEvent ext-all-debug.js:83623 
Ext.define.onRowMouseDown ext-all-debug.js:109750 
Ext.util.Event.Ext.extend.fire ext-all-debug.js:8896 
Ext.define.continueFireEvent ext-all-debug.js:9102 
Ext.define.fireEvent ext-all-debug.js:9080 
Ext.override.fireEvent ext-all-debug.js:51104 
Ext.define.processUIEvent ext-all-debug.js:85315 
Ext.define.handleEvent ext-all-debug.js:85227 
(anonymous function) 
Ext.apply.createListenerWrap.wrap 

Выбор по этому пункту пожары событие «выбрать» и «снимите флажок», когда я нажимаю второй раз. Но символ проверки на флажке не работает в любое время.

У меня есть, чтобы вручную нанести этот символ на события «select» и «deelect» в качестве обходного пути, но я не знаю, как поставить этот стиль и какой из них.

Есть ли у вас идеи? Ждите ваших предложений. Заранее спасибо. Manuel

Answer 1

Я думаю, что ошибки не связаны с кодом, который вы опубликовали. Фактически, ваш код не устанавливает ширину и не вызывает up.

Я нахожу ваш код запутанным: обратный вызов со слушателем внутри, что создает представление внутри. И я не понимаю, находится ли ваш код внутри контроллера или другого класса.

Вот проблема:

var tab = tp.add({ 
//xtype is missing 
title: year, 

Для отладки, я могу GIV вам следующую рекомендацию:

• Использование ext-dev.js вместо ext-all-debug.js. Это будет загружать все необходимые классы один за другим, а ошибки в backtrace не все внутри ext-all-debug.js, но каждая строка показывает строку в исходном классе со всеми комментариями в ней.

Чтобы получить более чистый стиль программирования, попробуйте следовать шаблону MVC строго:

• Структура папок в recommended

• Определить события в контроллере, как

  init: function(){ 
      this.listen({ 
       store: { 
        '#plannedYearsStore': {load: this.onPlannedYearsStoreLoad} 
       } 
      }) 
      this.control({ 
       'tab': {activate: this.onTabActivate} 
      }) 
  }, 
  onPlannedYearsStoreLoad: function (store, records){ 
      for (i=0; i< records.length; i++){ 
       var year = records[i].data.year; 
       var tab = tp.add({ 
      ... 
  }, 
  onTabActivate: function(){ 
      var tbOverview = Ext.getCmp('tabOverview-'+ this.year); 
      ... 
  }, 
  

• Если возможно, укажите свою вкладку в классе вида в отдельном файле.

Когда вы придерживаетесь строчки к этой структуре MVC, вы получите гораздо более удобный для пользователя код.