Menu + Dataviews

[simosol_osro]

Hi,

I'm trying to build menu (Ext.Menu) with multiple dataviews in vertical order and then there is few labels between the dataviews. Everything looks fine except that the menu can be only scrolled from the Label items.

Any ideas how this could be fixed?

[Gary Schlosberg]

Difficult to say without seeing some code (at least for me). This is the modern toolkit?

[simosol_osro]

Difficult to say without seeing some code (at least for me). This is the modern toolkit?

Yes, Modern toolkit.

        var template = new Ext.XTemplate('<div class="layeritem"><img src="{img}"/><label for="{name}">{label}</label><input id="{name}" type="checkbox"',
            '<tpl if="checked == true">checked</tpl>/></div>'
        );


        if (me.menu == null || me.recreateMenu) {
            me.menu = Ext.create('Ext.Menu', {
                width: '80%',
               // height: '100%',
                borderBorder: false,
                border: false,
                scrollable: 'y',
                listeners: {
                    hide: me.onMenuHide.bind(me)
                },
                items: [


                    {
                        xtype: 'label',
                        cls: 'layermenulabel',
                        html: i18n.t('general.baselayers')
                    },
                    {
                        xtype: 'dataview',
                        emptyText: "Ei pohjakarttoja",
                        height: '100%',
                        listeners: {
                            itemsingletap: me.onLayerItemSingleTap
                        },
                        store: {
                            storeId: "storeBaselayers",
                            fields: ['label', 'name', 'img', 'checked'],
                            data: baselayersMenu
                        },
                        itemTpl: template
                    },
                    {
                        xtype: 'label',
                        cls: 'layermenulabel',
                        html: i18n.t('general.userlayers')
                    },
                    {
                        xtype: 'dataview',
                        minHeight: '50px',
                        height: '100%',
                        listeners: {
                            itemsingletap: me.onLayerItemSingleTap
                        },
                        emptyText: "Ei sisältöä",
                        store: {
                            storeId: "storeUserlayers",
                            fields: ['label', 'name', 'img', 'checked'],
                            data: userlayersMenu
                        },
                        itemTpl: template
                    },
                    {
                        xtype: 'label',
                        cls: 'layermenulabel',
                        html: i18n.t('general.overlaylayers')
                    },


                    {
                        xtype: 'dataview',
                        height: '100%',
                        emptyText: "Ei päälyskarttoja",
                        listeners: {
                            itemsingletap: me.onLayerItemSingleTap
                        },
                        store: {
                            storeId: "storeOverlaylayers",
                            fields: ['label', 'name', 'img', 'checked'],
                            data: overlaylayersMenu
                        },
                        itemTpl: template
                    }
                ]
            });




            Ext.Viewport.setMenu(me.menu, {
                side: 'right',
                cover: true
            });
        }


        Ext.Viewport.showMenu('right');

[simosol_osro]

Here is a screen recording from the issue. You can see that the menu can be scrolled, but only from the Label items (blue titles).

https://youtu.be/EJwuhM9tWvU