Getting height of ExtJS panel used as border region

Question

I'm struggling mightily to get the height of an ExtJS panel and the only reason I can think it's any different is that it's the panel defined as a border region, because I've not had this problem otherwise (maybe I need to report a bug to them). I'll begin with some code that demonstrates how I'm trying to get the height, with results demonstrating what the height really is, what ExtJS says it is, and how it's not an issue with a panel using a different layout (one of the panels inside the border region):

    'cmBuildTab #cmProductExplorer': {
        afterrender: function(productExplorer) {
            var domNode = Ext.getDom(productExplorer.el),
                savedSearchesPanel = productExplorer.down('#savedSearchesPanel');

            console.log('productExplorer.getHeight(): ' + productExplorer.getHeight());   
            console.log(productExplorer.componentLayout);
            console.log(productExplorer.componentLayout.lastComponentSize);
            console.log(domNode);
            console.log('domNode.style.height: ' + domNode.style.height);
            console.log('savedSearchesPanel.getHeight(): ' + savedSearchesPanel.getHeight());
        }
    },

I was initally encouraged I might have a couple of alternate ways to get the height, via the dom node, or via componentLayout.lastComponentSize but neither of these are accessible to Javascript code, only the chrome console. My final try then would be to parse the returned dom string but that is a horrible hack. Suggestions appreciated; below the console.log results is the pertinent portion of my view config.

console.log results:

productExplorer.getHeight(): 2

Ext.Class.newClass
autoSized: Object
borders: Object
calculateDockBoxes_running: false
childrenChanged: true
frameSize: Object
id: "dock-1155"
info: Object
initialized: true
initializedBorders: true
lastComponentSize: Object
height: 787
width: 254
__proto__: Object
layoutBusy: false
layoutCancelled: false
onLayout_running: false
owner: Ext.Class.newClass
previousComponentSize: undefined
targetInfo: Object
__proto__: Class.registerPreprocessor.prototype

undefined

<div id=​"panel-1049" class=​"x-panel x-box-item x-panel-default" role=​"presentation" aria-labelledby=​"component-1198" style=​"margin:​ 0px;​ width:​ 254px;​ height:​ 787px;​ left:​ 0px;​ top:​ 0px;​ ">​…​</div>​

domNode.style.height:  

savedSearchesPanel.getHeight(): 151

View config (partial):

    },{
        region: 'west',
        collapsible: true,
        title: 'Product Explorer',
        itemId: 'cmProductExplorer',
        split: true,
        width: '20%',
        minWidth: 100,
        layout: {
        type: 'vbox',
        pack  : 'start',
        },
        items: [{
        collapsible: true,
        width: '100%',
        border: false,
        title: 'Search',
        itemId: 'savedSearchesPanel',
        items: [{
            border: false,
            xtype: 'cmSearchTermAccordionPanel'
        },{
            border: false,
            margin: '5 20 0 20',
            html: 'Saved Searches:<hr>'    
        }]
        },{

Answer 1

afterrender is not the event you want to use to determine the heights of components, it fires when the elements have been rendered not after they have been sized. If you are using 4.1 you can use the boxready event which fires only once the the container is intially sized http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready . If not you can use the afterlayout event to determine size but that event fires every layout.

Also fyi widths as percentages are not documented as supported in 4.0, I've seen them work and I've seen them fail.

Here is some code I hijacked from the Viewport example thanks to a court ruling this is ok.
4.1

    Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150,
        //ADD LISTENERS
        listeners: {
            afterrender:function(){console.log( 'afterrender ' +this.getHeight())},
            boxready:function(){console.log( 'boxready ' +this.getHeight())}
        }
        // could use a TreePanel or AccordionLayout for navigational items
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

Output :

afterrender 2
boxready 276