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();
}
});

另见下面引用的视图;

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

有几件事......

您尚未在控制器中包含Admin商店。 store需要Tree，因此如果该引用失败则可能是问题。
您正在向items tree添加initComponent，这是没有意义的。您的树配置已在Ext.define中，因此设置this.items = ...是在树面板中添加新的嵌套项。这不是你想要的。
正如我的评论中所述，请勿在{{1}}中同时使用alias和xtype。

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

tree

未捕获的TypeError：无法调用未定义的方法'getRootNode'

1 个答案: