javascript - ExtJs 4 MVC ネストされたレイアウト

Question

アプリの単純なフレームワークを実装しようとしています。アイデアは、ページ ヘッダーを含む北領域と交換可能な中央領域を使用して、背景ビューポート タイプの「レイアウト」を作成することです。

アプリが起動すると、ログインフォームが表示されます。ユーザー/パスワードに問題がなければ、フォームは破棄され、メイン レイアウトが表示されます。メイン レイアウトは、その中央領域にネストされたレイアウトを挿入する必要があります。

これは私の背景レイアウトコードです:

Ext.define('DEMO.view.BackgroundLayout', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.background',
    requires: [
        'DEMO.view.Main'
    ],

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            items: [
                {
                    region: 'north', 
                    html: '<h1 class="x-panel-header">Page Title</h1>'
                },
                {
                    xtype: 'mainview',
                    region: 'center',
                    forceFit: false,
                    height: 400   
                }
            ]
        });

        me.callParent(arguments);
    }
});

主なレイアウトは次のとおりです。

Ext.define('DEMO.view.Main', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.mainview',
    requires: [
        'DEMO.view.MyGridPanel'
    ],

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;
            console.log('bb');
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'mygridpanel',
                    region: 'center', 
                    forceFit: false
                },
                {
                    xtype: 'container',
                    height: 38,
                    forceFit: false,
                    region: 'north',
                    items: [
                        {
                            xtype: 'button',
                            height: 34,
                            id: 'btnLogout',
                            action: 'logout',
                            text: 'Logout'
                        }
                    ]
                }
            ]
        });
        me.callParent(arguments);
    }
});

ご覧のとおり、中央領域には「mygridpanel」という名前の xtype が必要です。これはそのコードです：

Ext.define('DEMO.view.ui.MyGridPanel', {
    extend: 'Ext.grid.Panel',

    border: '',
    height: 106,
    title: 'My Grid Panel',
    store: 'MyJsonStore',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            viewConfig: {

            },
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'Id',
                    text: 'Id'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'Name',
                    text: 'Name'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'Sales',
                    text: 'Sales'
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'button',
                            disabled: true,
                            id: 'btnDelete',
                            allowDepress: false,
                            text: 'Delete'
                        },
                        {
                            xtype: 'button',
                            disabled: true,
                            id: 'btnEdit',
                            allowDepress: false,
                            text: 'Edit'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});

私の問題は、 Ext.create('DEMO.view.BackgroundLayout', {}); を呼び出すときです。ネストされたレイアウトのみが表示され、背景のレイアウトは非表示になっています。また、Chrome のコンソールで次のエラーが表示されます。

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

私が間違っていることは何ですか？

前もってありがとう、レオナルド。