Hi,

I want to set size to container (panel in this case) upon child components size and position.
I have something like this.

Code:
Ext.define('ToolOptionPanel', {
    alias: 'widget.tooloptionpanel',
    extend: 'Ext.Panel',   
    border: false,
    height: 60,        
    layout: 'absolute',    
    SPACE_WIDTH: 12,    
    listeners: {
        afterrender: function(cmp) {               
            var width = 0;
            for(var i = 0; i < cmp.items.length; i++) {
                var item = cmp.items.get(i);                
                var v = item.getPosition(true)[0] + item.getWidth();
                if (v > width) {
                    width = v;
                }
            }                               
            cmp.setWidth(width + this.SPACE_WIDTH);            
        }
    }    
});

Ext.define('ToolNumberOptionPanel', {
    alias: 'widget.toolnumberoptionpanel',
    extend: 'ToolOptionPanel',
    DEFAULT_WIDTH: 70,
    initComponent: function() {
        var width = this.width ? this.width : this.DEFAULT_WIDTH;          
        this.items = [
            {
                xtype: 'label',
                text: this.text,                
                x: 0, y: 0
            },
            {
                xtype: 'label',
                text: this.unitText,                
                hidden: Ext.isEmpty(this.unitText),                
                x: width + 3, y: 18
            },                        
            {  // LAYOUT PROBLEM ON FireFox !!!
                xtype: 'numberfield',
                itemId: 'value',                
                width: width,
                x: 0, y: 14,
                value: this.defaultValue                                
            }
        ]
        this.callParent();        
    },
    getValue: function() {        
        return this.down('#value').getValue();
    }
});
Container (ToolOptionPanel) has width = 0 and its width is calculated in 'afterrender' event handler.
Everything is OK on Chrome, IE, Safari but on FireFox 'numberfield' component are rendered before 'afterrender' event and bad flickering is visible.
Please tell where should I calculate and set width of my container to avoid this flickering?

Thanks in advance! (and sorry for my english, it's not my native language )