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结构时，您将获得更容易维护的代码。