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.

Extjs Store not loading

I recently came across the problem of my Extjs Store not loading anything, with no apparent errors. My Ext.data.Store loads data from a remote server and uses a Ext.data.ArrayReader with a converter for one of the fields, like:

    var genericFeaturesStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: 'getRecords.do'}),

    reader: new Ext.data.ArrayReader({}, [

        { name: 'title' },
        { name: 'records', convert : convertRecords}
    ]),
    ...
    });

The converter looks like this:

    var convertRecords = function(v, record) {
        for (var i = 0; i < v.length; i++) {
            v[i] = new Record(
                    v[i].title,
                    v[i].description,
                    v[i].serviceType,
                    v[i].serviceURLs,
                    v[i].keywords);
        }
        return v;
    };

The problem I had was that the convertRecords() seemed to begin execution but not complete, although the application was not stuck but appeared as if convertRecords() had returned.


The solution, which should help for any generic Store loading (or not loading) problem:

    genericFeaturesStore.on({
        'load': {
            fn: function(store, records, options) {
                alert("load");
            },
            scope: this
        },
        'loadexception': {
            fn: function(obj, options, response, e) {
                alert("error: "+e);
            },
            scope: this
        }
    });

This allowed me to see that it was throwing an error because it couldn't find the serviceType for one of the many records.