0

我尝试使用 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 请求向这个根节点添加新的子节点。

谢谢

4

1 回答 1

0

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'.

于 2013-03-04T02:35:18.247 回答