菜单滚动器在 Extjs 中无法正常工作

Question

我正在尝试在 ExtJs 中创建可滚动菜单

我面临的问题：

1. 第一次单击菜单按钮时的滚动条不起作用（它似乎在可滚动时起作用：false）

2. 下次点击菜单时..菜单不再溢出..

Fiddle showcasing the problem

还有，

要求的行为：

如果有人有任何想法或遇到类似情况，请提供帮助

提前致谢

Answer 1

我知道问题是关于菜单滚动的，但根据您需要的行为，您可以使用panel 作为覆盖，您可以在面板内部使用grid 和checkboxmodel。

您需要在设置按钮点击时使用showBy() 方法。

多按钮点击的覆盖面板屏幕截图：

---

在这个Fiddle 中，我使用panel 和grid 创建了一个演示。

代码片段

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

    }
});