Ext rendering width erratic?

[xun]

I have a lot of trouble trying to figure how the Ext rendering mechanism works.

For example, inside a panel I am trying to render a few datefield side by side, each has a width of 90. Somehow the panel gives me this

<div id="tab-dash-innerCt" class="x-box-inner " role="presentation" style="height: 500px; width: 90px;">

which essentially cut off all of my datafields other than the first one?

This happens throughout, and i often have to comb through the complex rendering output trying to find out what the hell ...

[scottmartin]

See if this is what you had in mind:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },    
    bodyPadding: 10,
    fieldDefaults: {
       labelWidth: 60
    },    
    title: 'Dates',
    items: [{
        xtype: 'container',
        layout: {
            type: 'hbox',
            defaultMargins: {top: 0, right: 5, bottom: 0, left: 0}
        },    
        defaultType: 'datefield',
        items: [{
            fieldLabel: 'Date 1',
            flex: 1
        }, {
            fieldLabel: 'Date 2',
            flex: 1
        }]
    }]
});

Regards,
Scott.

[xun]

thanks. Makes a lot of sense.