未捕获的类型错误：无法调用未定义的方法“getRootNode”

Question

当我尝试在我的视图中使用树形面板时，我收到了上述错误。下面是代码；

List.js

Ext.define('AM.view.main.List', {
extend: 'Ext.tree.Panel',
alias: 'widget.adminlist',

requires: [
    'Ext.tree.*',
    'Ext.data.*'
],
xtype: 'tree-xml',

title: 'Admin Functions',
useArrows: true,
store: 'Admin',
initComponent: function() {
    this.items = [
        {
            title: 'Admin Functions',
            useArrows: true
        }
    ];

    this.callParent(arguments);
}
});

我尝试了几种变体，但仍然遇到相同的错误。下面是店铺代码；

Admin.js

Ext.define('AM.store.Admin', {
extend: 'Ext.data.TreeStore',

root: {
    expanded: true,
    children: [
        {
            text: 'app',
            children: [
                { leaf:true, text: 'Application.js' }
            ]
        },
        {
            text: 'button',
            expanded: true,
            children: [
                { leaf:true, text: 'Button.js' },
                { leaf:true, text: 'Cycle.js' },
                { leaf:true, text: 'Split.js' }
            ]
        },
        {
            text: 'container',
            children: [
                { leaf:true, text: 'ButtonGroup.js' },
                { leaf:true, text: 'Container.js' },
                { leaf:true, text: 'Viewport.js' }
            ]
        },
        {
            text: 'core',
            children: [
                {
                    text: 'dom',
                    children: [
                        { leaf:true, text: 'Element.form.js' },
                        { leaf:true, text: 'Element.static-more.js' }
                    ]
                }
            ]
        },
        {
            text: 'dd',
            children: [
                { leaf:true, text: 'DD.js' },
                { leaf:true, text: 'DDProxy.js' },
                { leaf:true, text: 'DDTarget.js' },
                { leaf:true, text: 'DragDrop.js' },
                { leaf:true, text: 'DragDropManager.js' },
                { leaf:true, text: 'DragSource.js' },
                { leaf:true, text: 'DragTracker.js' },
                { leaf:true, text: 'DragZone.js' },
                { leaf:true, text: 'DragTarget.js' },
                { leaf:true, text: 'DragZone.js' },
                { leaf:true, text: 'Registry.js' },
                { leaf:true, text: 'ScrollManager.js' },
                { leaf:true, text: 'StatusProxy.js' }
            ]
        },
        {
            text: 'core',
            children: [
                { leaf:true, text: 'Element.alignment.js' },
                { leaf:true, text: 'Element.anim.js' },
                { leaf:true, text: 'Element.dd.js' },
                { leaf:true, text: 'Element.fx.js' },
                { leaf:true, text: 'Element.js' },
                { leaf:true, text: 'Element.position.js' },
                { leaf:true, text: 'Element.scroll.js' },
                { leaf:true, text: 'Element.style.js' },
                { leaf:true, text: 'Element.traversal.js' },
                { leaf:true, text: 'Helper.js' },
                { leaf:true, text: 'Query.js' }
            ]
        },
        { leaf:true, text: 'Action.js' },
        { leaf:true, text: 'Component.js' },
        { leaf:true, text: 'Editor.js' },
        { leaf:true, text: 'Img.js' },
        { leaf:true, text: 'Layer.js' },
        { leaf:true, text: 'LoadMask.js' },
        { leaf:true, text: 'ProgressBar.js' },
        { leaf:true, text: 'Shadow.js' },
        { leaf:true, text: 'ShadowPool.js' },
        { leaf:true, text: 'ZIndexManager.js' }
    ]
}
});

控制器代码如下所示；

Users.js

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: [
    'Users'
],
models: ['User'],
views: [
    'main.Body',
    'main.List',
    'user.List',    
    'user.Edit'
],
init: function() {
    this.control({
        'mainbody > userlist': {
            itemdblclick: this.editUser
        },
        'useredit button[action=save]': {
            click: this.updateUser
        }
    });
},

editUser: function(grid, record) {
    var view = Ext.widget('useredit');

    view.down('form').loadRecord(record);
},

updateUser: function(button) {
var win    = button.up('window'),
    form   = win.down('form'),
    record = form.getRecord(),
    values = form.getValues();

record.set(values);
win.close();
// synchronize the store after editing the record
this.getUsersStore().sync();
}
});

另请参阅下面引用它的视图；

正文.js

Ext.define('AM.view.main.Body' ,{
extend: 'Ext.panel.Panel',
alias: 'widget.mainbody',

layout: 'border',
title: 'Administrator Profile',
width: 500,
height: 300,
store: ['Users', 'Admin'],
items: [{
    title: 'South Region is resizable',
    region: 'south',     // position for region
    xtype: 'panel',
    height: 100,
    split: true,         // enable resizing
    margins: '0 5 5 5'
},{
    // xtype: 'panel' implied by default
    region:'west',
    xtype: 'adminlist',
    margins: '5 0 0 5',
    width: 200,
    collapsible: true,   // make collapsible
    id: 'west-region-container',
    layout: 'fit'
},{
    title: 'Center Region',
    region: 'center',     // center region is required, no width/height specified
    xtype: 'userlist',   //this is displaying the gridview
    layout: 'fit',
    margins: '5 5 0 0'
}]
});

谁能帮我快点，我的想法不多了。 谢谢。

Answer 1

有几件事...

1. 您的控制器中没有包含Admin 存储。 store 是 Tree 所必需的，因此如果该引用失败，则可能是问题所在。
2. 您在initComponent 中将items 添加到您的tree，这没有任何意义。您对树的配置已经在Ext.define 中，因此设置this.items = ... 是在树面板中添加一个新的嵌套项。这不是你想要的。
3. 正如我在评论中提到的，不要在Ext.define 中同时使用alias 和xtype。

如果您不需要将任何特定的额外功能添加到您的树中（您当前的代码建议这样做），并且您只使用它一次（不确定是否是这种情况），您也可以只使用单个实例tree 没有为其定义单独的类：

{
    xtype: 'treepanel',
    store: 'Admin',   //still make sure this is defined in controller or "requires" config
    useArrows: true,
    title: 'Admin Functions',

    region:'west',
    margins: '5 0 0 5',
    width: 200,
    collapsible: true,   // make collapsible
    id: 'west-region-container',
    layout: 'fit'
}