Скроллер меню не работает должным образом в Extjs

Question

Я пытаюсь создать прокручиваемое меню в ExtJs

Проблемы, с которыми я сталкиваюсь:

1. Прокрутка при первом нажатии кнопки меню не работает (похоже, работаетпри прокрутке: false)

2. В следующий раз при нажатии на меню ... меню больше не переполняется ..

Скрипка, демонстрирующаязадача

Также,

Требуемое поведение:

Пожалуйста, сделайте фишку, если кто-нибудь получилидеи или столкнулись с подобной ситуацией

Заранее спасибо

Answer 1

Я знаю, что вопрос касается прокрутки меню, но в соответствии с вашим требуемым поведением вы можете использовать panel в качестве наложения и вы можете использовать grid внутри панели с checkboxmodel.

При нажатии кнопки настройки необходимо использовать метод showBy().

Снимок экрана с панелью наложения для нажатия нескольких кнопок:

---

В этом Fiddle я создал демо, используя panel и grid.

КОД SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        //Common button click on setting button
        function onButtonClick(btn, e) {
            //If menu is alredy created for that button no need to create directly show or hide
            var myMenu = btn.myMenu;

            //If menu is not create then need to create
            if (!myMenu) {
                myMenu = btn.myMenu = Ext.create({
                    xtype: 'custommenu',
                    title: btn.getText()
                });
            }
            myMenu.isHidden() ? myMenu.showBy(btn, "bl") : myMenu.hide();
        }

        //Define common store for grid menu
        Ext.define('MenuStore', {
            extend: 'Ext.data.Store',
            alias: 'store.menustore',
            fields: ['text'],
            data: (() => {
                let data = [];
                for (let i = 65; i < 91; i++) {
                    data.push({
                        text: String.fromCharCode(i)
                    })
                }
                return data;
            })()
        })

        Ext.define('CustomMenuOverlay', {
            extend: 'Ext.panel.Panel',
            xtype: 'custommenu',
            hidden: true,
            tools: [{
                iconCls: 'x-fa fa-download'
            }, {
                type: 'refresh'
            }, {
                type: 'gear'
            }],
            width: 170,
            maxHeight: 200,
            floating: true,
            layout: 'vbox',
            items: [{
                xtype: 'grid',
                flex: 1,
                width: '100%',
                height: 200,
                selModel: {
                    checkOnly: false,
                    mode: 'SIMPLE'
                },
                selType: 'checkboxmodel',
                store: {
                    type: 'menustore'
                },
                columns: [{
                    dataIndex: 'text',
                    flex: 1
                }]
            }],

            bbar: [{
                text: 'Apply',
                width: '100%',
                itemId: 'apply',
                handler: function (btn) {
                    //On appy button click you put your logic whatever you need
                    //You can get menu using up selector with {custommenu}
                    var myMenu = btn.up('custommenu');
                    myMenu.hide();
                    console.log(myMenu.down('grid').getSelection())
                }
            }]
        });

        //create grid panel
        Ext.create('Ext.grid.Panel', {
            title: 'Support',
            store: {
                fields: ['firstName', 'Surname'],
                data: [{
                    Rank: 30,
                    firstName: 'Mihir',
                    Surname: "Kothari",
                    FullName: "Z Kothari Mihir"
                }, {
                    Rank: 20,
                    firstName: 'Parv',
                    Surname: "Kothari",
                    FullName: "X Kothari Parv"
                }, {
                    Rank: 10,
                    firstName: 'Reena',
                    Surname: "Kothari",
                    FullName: "Y Kothari Reena"
                }]
            },

            columns: [{
                text: 'Surname',
                dataIndex: 'Surname'
            }, {
                text: 'FirstName',
                dataIndex: 'firstName'
            }, {
                text: 'Rank',
                dataIndex: 'Rank'
            }],

            bbar: [{
                text: 'settings',
                handler: onButtonClick
            }, '->', {
                text: 'settings1',
                handler: onButtonClick
            }, '->', {
                text: 'settings2',
                handler: onButtonClick
            }, '->', {
                text: 'settings3',
                handler: onButtonClick
            }, '->'],
            renderTo: Ext.getBody()
        });

    }
});