Combobox rendering issue in viewport

[mudittuli]

Hi,
I have a form with a combobox in a viewport, the combobox is not rendering the way it should(the screen shot is attached), seems like the list width is 0. Though the combobox will render fine, when the form is not added to a viewport.
Below is the markup from Introspector and when I increase the width marked in blue, the list width starts to increase.

<DIV id="ext-gen48" class="x-form-field-wrap" style="width: 0px; ">
    <INPUT id="combo" type="text" size="24" autocomplete="off" name="metro_name" class=" x-form-text x-form-field" style="width: 230px; "/>
    <IMG id="ext-gen49" src="http://extjs.com/s.gif" class="x-form-trigger x-form-arrow-trigger"/>
<DIV />

Can I increase the width of the above div, somehow ?
Or please point to something stupid I am doing here.

Below is the combobox code

var statusTpl = new Ext.XTemplate(
		'<tpl for="."><div class="x-combo-list-item">{status}</div></tpl>'
);
var metroTpl = new Ext.XTemplate(
		'<tpl for="."><div class="x-combo-list-item">{metro}</div></tpl>'
);

Ext.onReady(function() {
	 var metro_store = new Ext.data.SimpleStore({
        fields: ['metro_name', 'metro'],
        data : metros
    })
	var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
        items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.ComboBox({
		     	fieldLabel: 'Metro',
		     	listWidth :230,
		     	lazyRender:true,
		     	minListWidth:230,
		        name: 'metro_name',
		        store:metro_store,
		        tpl:statusTpl,
		        bodyStyle:'width:100px',
		        valueField :'metro',
		        displayField:'metro',
		        typeAhead: true,
		        mode: 'local',
		        triggerAction: 'all',
		        selectOnFocus:true,
		        tpl:metroTpl
		     })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render('filter_form');
    
    
    var viewport = new Ext.Viewport({
	    layout:'border',
	    items:[{
            region:'center',
            contentEl:'filter_form',
            closable:false,
            height: 600,
            minSize: 100,
            maxSize: 600,
        }]
	});
	
});

[jonn]

http://extjs.com/forum/showthread.php?t=29997

See if that helps.