Pages

Friday, October 8, 2010

setting Extjs Menu maximum height

I was recently trying to set the maximum height of an Extjs.menu.Menu and wasted way too much time on it, including posting on the Sencha forums and waiting in vain for a reply. But I now have a solution, and here it is, for the greater good of humanity...

What I tried that failed was something like:


 menu = new Ext.menu.Menu({  
                 id: 'menu',  
                 style: '',  
                 items: items,  
                 renderTo: 'center_region',  
                 showSeparator: false,  
                 maxHeight: 100,  
                 autoScroll: true,  
                 enableScrolling: true  
   
               });  
   
               menu.showAt([x, y]);
I tried various settings of autoHeight, style, etc. as well and nothing seemed to work. Adding the height attribute (height: 100) actually made a difference, but it now set the height permanently to 100px rather that a maximum of 100px, which resulted in a number of unsightly gaps at the bottom of the menu when the number of items was small.

The solution that finally worked for me was the following:


               reportsMenu = new Ext.menu.Menu({  
                 id: 'reportsMenu',  
                 showSeparator: false,  
                 boxMaxHeight: 150,  
                 autoScroll: true,  
                 enableScrolling: true,  
                 items: selectedReports  
               });  
   
               reportsMenu.showAt([x, y]);  
               reportsMenu.syncSize();
How one is supposed to figure that out from the Ext documentation beats me (unless hours of trial and error is intended). FYI I was using Extjs 3.1.1, in case it is ever updated to be more intuitive and the meaning of properties changes in future.

0 comments:

Post a Comment

 
Powered by Blogger