ExtJs 4 MVC Nested Layouts - PullRequest
Новая
       7

ExtJs 4 MVC Nested Layouts

1 голос
/ 09 февраля 2012

Я пытаюсь реализовать простую структуру для приложения. Идея состоит в том, чтобы создать фоновый видовой экран типа «макет» с северным регионом, содержащим заголовок страницы и сменный центральный регион.

Когда мое приложение запускается, отображается форма входа. Если пользователь / пароль в порядке, форма уничтожается, и должен появиться основной макет. Основной макет должен вставлять вложенный макет в его центральную область.

Это код моего фонового макета: 

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

Как видите, центральному региону нужен тип x с именем mygridpanel. Вот код для этого: 

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

Что я делаю не так?

Заранее спасибо, Leonardo.

...