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

我做错了什么？。

提前致谢， 莱昂纳多。