2

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

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

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

管理员.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' }
    ]
}
});

控制器代码如下所示；

用户.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'
}]
});

有人可以快速帮助我吗？我的想法已经不多了。谢谢你。

4

1 回答 1

1

有几件事...

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

如果您不需要将任何特定的额外功能添加到您的树中（您当前的代码建议），并且您只使用它一次（不确定是否是这种情况），您也可以只使用 a 的单个实例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'
}
于 2013-09-10T12:33:22.253 回答