In our user interface, we have a filter menu that could, potentially, contain enough filters that, if its height is not restricted, the menu would extend past the bottom of the screen. So, to that end, we set the menu’s maxHeight property to make the menu show a scroll bar when it gets that many entries in it. However, it doesn’t appear to be working. Even with the maxHeight property set, its height always goes to whatever it needs to show all of the entries at once, even if the height is greater than the maxHeight. The result is that the bottom entries of the menu are cut off and can’t be scrolled into view, as no scroll bar appears on the menu. How can this be fixed?

The menu is defined as a component in a grid’s toolbar, like so (SITE_URL is the web site’s URL):

                            {
                              id: "menu_filter",
                              icon: SITE_URL + "/images/filter_16.png",
                              text: "Filter",
                              menuAlign: "tr-br",
                              border: 0,
                              style:
                                {
                                  borderColor: "#1979ca",
                                  borderStyle: "solid"
                                },
                              menu:
                                {
                                  id: "menu_sub_filter",
                                  xtype: "menu",
                                  listeners:
                                    {
                                      beforeshow: function()
                                        {
                                          // code that fills in the menu's options on first render
                                          // or when custom options have been added/deleted/edited
                                        }
                                    }
                                }
                            },

In the page’s set-up code in the Ext.onReady() function, I have a function that adjusts the maxHeight in response to page resizing (using the grid as the size reference, as it takes up most of the page and is resized when the page is resized). This is the function definition and the code that sets up the listeners for calling the function:

    myGrid = Ext.create("myGrid"); // "myGrid" is Ext.define()'d earlier in the code
    function adjustFilterMenuMaxHeight(c, width, height)
      {
        // limit the max height of the Filter menu to the height of the object grid to prevent the bottom
        // of it from being clipped and to force it to have a scroll bar if it has lots of entries
        const HEIGHT_LIMIT = 616;
        var menu = Ext.getCmp("menu_sub_filter");
        menu.maxHeight = (height > HEIGHT_LIMIT) ? HEIGHT_LIMIT : height;
        menu.updateLayout();
      }
    // myGrid is a global variable that's assigned a reference to the grid earlier in the code
    myGrid.addListener("boxready", adjustFilterMenuMaxHeight);
    myGrid.addListener("resize", adjustFilterMenuMaxHeight);