Установить выпадающее меню как пункт главного меню - PullRequest
Новая
       11

Установить выпадающее меню как пункт главного меню

0 голосов
/ 14 сентября 2018

У меня проблемы с добавлением выпадающего меню в качестве пункта меню.

Это мое главное меню: 

Ext.define('ECR.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',

        'ECR.view.main.MainController',
        'ECR.view.main.MainModel',
        'ECR.view.main.List'
    ],

    controller: 'main',
    viewModel: 'main',

    ui: 'navigation',
    tabBar: {
        layout: {
            pack: 'center'
        },
        border: false
    },

    defaults: {
        iconAlign: 'top',
        bodyPadding: 15
    },

    items: [{
            title: 'Home',
            iconCls: 'fa-home',
            bind: {
                html: 'Test'
            }

        },
        {   title: 'DROPDOWN',
            iconCls: 'fa-cogs',
            bind: {
                html: 'Test'
            },
            xtype: 'dropdownButton'
        },

        {
            title: 'Administration',
            iconCls: 'fa-cogs',
            bind: {
                html: '{loremIpsum}'
            }
        }, {
            title: 'Reporting',
            iconCls: 'fa-calendar',
            bind: {
                html: '{loremIpsum}'
            }
        },
        {
            title: 'Help',
            iconCls: 'fa-question',
            bind: {
                html: '{loremIpsum}'
            }
        },
        {
            title: 'Account',
            iconCls: 'fa-user',
            bind: {
                html: '{loremIpsum}'
            }
        }
    ]
});

И здесь я пытаюсь добавить выпадающий список, в котором я определил ранее: 

{   title: 'DROPDOWN',
            iconCls: 'fa-cogs',
            bind: {
                html: 'Test'
            },
            xtype: 'dropdownButton'
        },

Это определение раскрывающегося списка: 

Ext.define('My.harun.Button', {
    extend: 'Ext.menu.Menu',
    alias: ['widget.dropdownButton'],

    text: 'Menu button',

    arrowAlign: 'bottom',
    menu: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' },
        { text: 'Item 4' }
    ],
    listeners: {
        mouseover: function() {
            this.showMenu();
        }
    }
});

Но это не работает. Однако я попытался создать его вручную, используя Ext.create(): 

Ext.create('Ext.Button', {
    text: 'Menu button',
    renderTo: Ext.getBody(),
    arrowAlign: 'bottom',
    menu: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' },
        { text: 'Item 4' }
    ],
    listeners: {
        mouseover: function() {
            this.showMenu();
        }
    }
})

Пока я получаю только это:

enter image description here

Мне удалось поместить элемент в главное меню, но он все еще не выпадающий. И когда я нажимаю на этот элемент, он показывает действительно большую кнопку на главном экране (здесь, где написано «Тест»).

Есть ли способ исправить это, или я должен использовать панель инструментов?

1 Ответ

0 голосов
/ 17 сентября 2018

Решено с tabConfig. Если кому-то нужен выпадающий элемент в вашем меню, включите его в свой список items: 

{
    tabConfig:
    {
        title: 'Dropdown menu',
        iconCls: 'fa-home',
        menu: Ext.create('Ext.menu.Menu',
        {
            width: 100,
            plain: true,
            items: [
            {
                text: 'Dropdown Item 1'
            },
            {
                text: 'Dropdown Item 2'
            },
            {
                text: 'Dropdown Item 3'
            }]
        })
    }
},
...