PDA

View Full Version : Ext rendering width erratic?



xun
2 May 2012, 7:46 AM
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
4 May 2012, 6:38 AM
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
4 May 2012, 6:40 AM
thanks. Makes a lot of sense.