Question

我尝试使用MVC架构开发应用程序。我有以下控制器代码：

Ext.define('PM.controller.Projects', {
    extend: 'Ext.app.Controller',

    models: ['Project'],
    stores: ['Projects'],

    views: [
        'projects.Tree',
        'Toolbar',
    ],

    init: function(config) {
        var tree = this.getProjectsTreeView();
        var rootNode = tree.getRootNode();
        console.log(rootNode);
        this.callParent(config);
    }
});

此视图代码：

Ext.define('PM.view.projects.Tree', {
    extend: 'Ext.tree.Panel',
    xtype: 'projectsTree',

    title: 'Projects',
    hideHeaders: true,
    root: {
        text: "Projekte"
    }

});

它尝试从控制器中的树视图中获取根节点，但是我得到的错误是getRootNode（）不是我控制器中的有效函数。谁能告诉我为什么会出现这个错误？我的目标是从ajax请求中将新子节点添加到此根节点。

由于

Answer 1

Ext为方法数组中的每个字符串生成的方法返回构造函数，可用于创建相应的视图。这看起来很奇怪，但就是这样。

如果要访问实际的视图组件，则需要为其创建ref。您的init方法不应该假设视图存在。由于控制器的init方法在应用程序的launch方法之前被调用，因此可能不会将所有视图添加到页面中。

您希望将逻辑放在控制器的onLaunch模板方法中，该方法在启动应用程序并添加视图后调用。

Ext.define('PM.controller.Projects', {
    extend: 'Ext.app.Controller',

    refs: [{
        ref: 'projectsTreeView',
        selector: 'projectsTree'
    }],

    init: function() {
        // It's safe to add selectors for views that don't exist yet.
        this.control(/*...*/)
    },

    onLaunch: function(config) {
        var tree = this.getProjectsTreeView();
        var rootNode = tree.getRootNode();
        console.log(rootNode);
    }
});

如果这不起作用，则表示您实际上并未在任何地方添加视图。您可以添加它的一个地方是应用程序的启动方法。有些东西必须添加树视图。

Ext.application({
    // ...

    views: ['projects.Tree']

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [new this.getProjectsTreeView()]
        });
    }
});

所以事件的年表是这样的：

Application#constructor 
Controller#constructor
Controller#init (can't assume the view exists)
Application#onBeforeLaunch
Application#launch (view is now added)
Controller#onLaunch (do something with the view that is now available)

此外，您的查看别名可能需要'widget.projectsTree'而不仅仅是'projectsTree'。

getRootNode（）不是一个函数

1 个答案: