PDA

View Full Version : Valid values for width and height



prasanth_kodali
22 Jul 2013, 6:31 AM
Is it valid to assign CSS percentages as Strings to Ext Components?

For example:

{ xtype: 'panel', width: '100%', height: '50%' }

ExtJS API Documentation only mentions that expected values for these config.s have to be of type 'Number'.
However, they seem to be getting applied to the components even if the dimensions are specified as in the above example.

Would there be any issues that could arise when specifying component dimensions as percentages as in the example above?

Thanks & Regards,

EPV
22 Jul 2013, 9:36 AM
That depends on which layout you are using in your "mother container", but I wouldn't use it.

I often end up with using "hbox" & "vbox" which allows you to use the "flex" config.



// Mother container
{
xtype:'container',
layout:{
type: 'vbox',
align:'stretch'
},
// Child items takes 50% of the height each
items:[
{
xtype:'component',
flex:1
},
{
xtype:'component',
flex:1
}
]
}


Good luck / E

skirtle
22 Jul 2013, 12:29 PM
Percentages can be quite useful within box layouts. e.g. Using align: 'stretch' will stretch all components whereas using a width or height of '100%' will just stretch one component. Note that the percentage acts in the opposite axis to the flex.

Border layout also has good support for percentage sizes on children and in many cases they provide a more natural description of the sizing than a flex. A west region with a width of '25%' is a pretty clear statement of intent.