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

当我再次点击时，对项目的选择会触发事件“选择”和“取消选择”。但是复选框上的复选符号随时都不起作用。

我想把这个符号手动放在事件“选择”和“取消选择”作为解决方法，但我不知道如何设置这种风格，以及是哪种风格。

你有什么想法吗？期待您的建议。先感谢您。曼努埃尔

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

Extjs 4.1.1a检查网格面板上的复选框符号不起作用

1 个答案: