Javascript Extjs 4.1.1a网格面板上复选框的复选符号不'；行不通

在选项卡面板上，我为数据库中的每一年创建一个选项卡（在本例中，数据库目前仅包含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);
    }
});

尽管如此，网格还是显示正确。但是，当我选择一个项目时，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

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

当我第二次单击时，项目上的选择触发事件“选择”和“取消选择”。但是复选框上的复选符号在任何时候都不起作用

我曾想过将此符号手动放置在事件“选择”和“取消选择”上作为解决方法，但我不知道如何放置此样式以及使用哪种样式

你有什么想法吗？期待你的建议。先谢谢你。

---

Manuel

我认为，这些错误与您发布的代码无关。事实上，您的代码没有设置宽度，也没有调用

up

我发现你的代码很复杂：一个内部有监听器的回调，它在内部创建了一个视图。我不明白你的代码是在控制器还是其他类中

这里有一个问题：

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

对于调试，我可以给您以下建议：

• 使用

  ext-dev.js

  而不是

  ext-all-debug.js

  。这将一个接一个地加载所有必需的类，回溯中的错误并不都在

  ext all debug.js

  中，但每一行都显示源类中包含所有注释的行

要获得更简洁的编程风格，请严格遵循MVC模式：

• 文件夹结构为
• 在控制器中定义事件，如

  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);
      ...
  },
  

  init:function（）{
  这个，听着({
  商店：{
  “#plannedYearsStore”：{加载：this.onPlannedYearsStoreLoad}
  }
  })
  这是我的控制({
  'tab'：{activate:this.onTabActivate}
  })
  },
  onPlannedYearsStoreLoad：功能（存储、记录）{
  对于（i=0；i

• 如果可能，请在单独的文件中的视图类中定义选项卡

---

当你严格遵循这个MVC结构时，你会得到一个更容易维护的代码。

谢谢你的建议。事实上，我遵循MVC结构，conde在控制器中。只是在这个复杂的情况下，它有点混乱。我会尝试使用ext-dev.js.Manuel