1

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

类型错误：名称未定义

我想使用的视图：

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

视口

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

引用视图的控制器

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

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

4

1 回答 1

2

对于视图和控制器，在声明它们时不需要指定它们的 'MC.controller' 和 'MC.view' 前缀。

所以你最终得到：

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

等等。

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

Ext.define('MC.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: {...}
于 2012-11-21T02:26:13.693 回答