Question

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

TypeError：名称未定义

查看我想使用：

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

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

Answer 1

对于视图和控制器，不需要在声明时指定其“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: {...}

尝试使用视图时出现extjs 4错误

1 个答案: