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'和'deselect'上作爲一個解決方法，但是我不知道如何放置這個樣式以及哪個樣式。

你有什麼想法嗎？期待您的建議。先謝謝你。 Manuel

Answer 1

我認爲，這些錯誤與您發佈的代碼無關。實際上，您的代碼不會設置寬度，也不會調用up。

我發現你的代碼很複雜：裏面有一個監聽器的回調，它在裏面創建一個視圖。我不明白你的代碼是在控制器還是其他類中。

這裏有一個問題：

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

對於調試，我可以連鎖行業你以下建議：

• 使用ext-dev.js而不是ext-all-debug.js。這將一個接一個地加載所有需要的類，並且回溯中的錯誤並不全部位於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結構時，您將獲得更容易維護的代碼。