Ext js 6.5+ Добавление компонентов в контейнер дает пустое окно просмотра - PullRequest
Новая
       73

Ext js 6.5+ Добавление компонентов в контейнер дает пустое окно просмотра

0 голосов
/ 07 мая 2020

Не знаю, почему у меня пустое окно просмотра. Я определяю подклассы как компоненты и пытаюсь заставить область просмотра отображать 2 созданных компонента. Кажется достаточно простым, но при этом пустым? 

Ext.define('MyApp.view.MyHeader', {
    extend: 'Ext.Container',
    items: [{

        xtype: 'titlebar',
        title: '<a href="#">Logo</a>',
        titleAlign: 'left',
        cls: 'im-titlebar',
        dock: 'top',
        id: 'titlebar',
        items: [

            {
                xtype: 'button',
                text: 'Log In',
                align: 'right',
                ui: 'action',
                margin: '',
                ariaRole: 'button',
                cls: 'btn-im-login action noprint',
                id: 'button_LogIn'
            }
        ]

    }]
});

Ext.define('MyApp.view.MyFooter', {
    extend: 'Ext.Container',

    items: [{
        xtype: 'container',
        items: [{
            xtype: 'button',
            text: 'Button',
            align: 'right',
            ui: 'action',
            ariaRole: 'button',
            cls: 'btn-im-login action noprint',
            id: 'button_Button'
        }]

    }]

});

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Container',
    requires: ['MyApp.view.MyHeader', 'MyApp.view.MyFooter']
});

Ext.Loader.setConfig({
    enabled: false
});

Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.Viewport.add(Ext.create('MyApp.view.MyView'));
    }
});

См. Скрипку

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Вы пытаетесь потребовать представления, но вы должны добавить его в родительское представление с помощью массива items. 

Ext.define('MyApp.view.MyHeader', {
    extend: 'Ext.Container',
    xtype: 'myheader',
    items: [{
        xtype: 'titlebar',
        title: '<a href="#">Logo</a>'
    }]
});

Ext.define('MyApp.view.MyFooter', {
    extend: 'Ext.Container',
    xtype: 'myfooter',

    items: [{
        xtype: 'container',
        items: [{
            xtype: 'button',
            text: 'Button'
        }]
    }]
});

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Container',
    xtype: 'myView',
    height: 100,
    items: [{
        xtype: 'myheader'
    }, {
        xtype: 'myfooter'
    }]
});

Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.Viewport.add({
            xtype: 'myView'
        });
    }
});

Помните - инструментарий classi c не имеет класса Ext.Viewport. 

Ext.application({
    name : 'MyApp',

    launch : function() {
        Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            bodyPadding: 20,
            tbar: {
                items: [{
                    xtype: 'label',
                    text: 'Header'
                }]
            },
            bbar: {
                items: [{
                    xtype: 'label',
                    text: 'footer'
                }]
            },
            items: [{
                xtype: 'form',
                title: 'My Form',
                layout: 'form',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'someField'
                }]
            }]
        });

    }
});
0 голосов
/ 07 мая 2020

Ваш код делает то, что вы определили.

Вам необходимо добавить компоненты Header и Footer как элементы.

Я бы посоветовал вам попробовать использовать панель и / или использовать имеющиеся там конфигурации tbar, bbar или заголовка.

документы:

https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg -dockedItems https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg -header https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg -bbar 

Ext.application({
    name: 'MyApp',
    launch: function () {
        var f = Ext.create('MyApp.view.MyHeader', {
            flex: 1
        });
        var h = Ext.create('MyApp.view.MyFooter', {
            flex: 1
        });
        Ext.Viewport.add(Ext.create('MyApp.view.MyView', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [h, f]
        }));
    }
});
...