1

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

考えられることはすべて試しましたが、ここにはまだコードがあまりないので、単純なはずです。

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 に答える