尝试使用 View 时出现 extjs 4 错误

Question

使用 extjs 4 尝试在我的视口(viewport)中使用 View 时出现错误。我认为这是如何定义 View /包含它的位置的问题。但是，我找不到我做错了什么。我知道这是一个简单的错误，我只是没有看到。我将在下面发布代码。错误是

类型错误:名称未定义

查看我想使用:

Ext.define('MC.view.SideBar', {
    extend: 'Ext.Container',
    alias: 'widget.SideBar',
    items:[
        { xtype: 'panel',
        bodyPadding: 5,
        html:'facebook'
        },
        { xtype: 'panel',
        bodyPadding: 5,
        html:'twitter?'
        }

    ]
    //... more configuration ...
});

视口(viewport)

Ext.create('Ext.container.Viewport', {
    layout: {
        //align:'center',
        pack:'center',
        type:'hbox',
        align:'stretch',
        border:true
    },
    items: [
        {xtype:'panel',
            layout:{
            type:'vbox',
            align:'stretch',
            pack:'start'
            },
            border:true,
            width: '80%',
            items:[
                {xtype:'panel',
                    border:true,
                    flex:2,
                    //width:'100%',
                    html:'toolbar/logo'
                },
                {xtype:'panel',
                    border:true,
                    flex:8,

                    layout:{
                        type:'hbox',
                        align:'stretch',
                        pack:'start'
                    },
                    items: [
                        //{xtype:'SideBar'},
                        **{xtype:'SideBar',**
                            flex:22,
                            height:'100%'
                        },
                        {xtype:'panel',
                            flex:88,
                            height:'100%'
                        }
                    ],

                    html:'lower'
                }
            ]
        }
    ]
});

引用 View 的 Controller

Ext.define('MC.controller.Monolith', {
    extend: 'Ext.app.Controller',

    views: [
        'TopBar', 'SideBar'
    ],

    init: function() {
        console.log('Initialized Monolith controller! This happens before the Application launch function is called');
    }
});

最后是申请文件

Ext.application({
    name: 'MC',
    //appFolder: 'app', 
    autoCreateViewport: true,
    controllers: [
        'Monolith'
    ],
    //models: [],
    //stores: [],
    launch: function() {
        console.log('mesacart');

        // This is fired as soon as the page is ready
    }
});

我已经尝试了我能想到的所有方法，但它必须很简单，因为这里还没有太多代码......

Answer 1

对于 View 和 Controller ，您 不要需要在声明它们时指定它们的 'MC.controller' 和 'MC.view' 前缀。

所以你最终得到:

views: [
        'TopBar', 'SideBar'
    ],

等等。

编辑:
当您要求自动创建视口(viewport)时，您需要将视口(viewport)类定义为 MC.view.Viewport
在 jsfiddle 中查看完整的代码示例:
http://jsfiddle.net/dbrin/qW4hR/

Ext.define('MC.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: {...}