PDA

View Full Version : Automatic Sizing issues



maddhippy
2 May 2011, 7:45 AM
Ok, I've been banging my head on this one...

Basically, I've got so nested containers in hopes that Sencha would take care of the font sizing for me.

However, whenever it spills over into 3 lines it overflows (see image).
25868

I've set the layouts aligns as stretch, but can't seem to get this container to 'contain' the text correctly.

Here's the relevant code:


this.details = new Ext.TabPanel({
id: 'details',
tabBar: {
dock: 'bottom',
ui: 'graymaroon',
layout: {
pack: 'center'
}
},
defaults:{
margin: '10 0 0 0',
padding: '0'
},
items: [
{
iconCls:'address_book',
id: 'address_book',
title:'Personal',
data: this.person.data,
scroll: 'vertical',
flex: '1',
layout: {
type: 'vbox',
align: 'stretch'
},
padding: '10 20 0 20',
items: [],
listeners:{
render: function(c){
renderContactInfo(c);
c.doLayout();
}
}
}
]
});
return this.details;
}
function renderContactInfo(container){
if (container.data.addresses.length>0){
var addresses = new Ext.Container({
baseCls: 'info-box', //only white background color
layout: {
type:'vbox',
align: 'stretch'
}
});
for (i=0;i<container.data.addresses.length;i++){
var address = new Ext.Container({
layout: {
type:'hbox',
align: 'stretch'
},
padding: '10',
items:[{
flex: 1,
data: container.data.addresses[i],
tpl: '{codeAddrType}',
padding: '0 10 0 0',
baseCls: 'label'
},{
flex: 4,
data: container.data.addresses[i],
tpl: '{street1} {city}, {state} {zipCode}',
}
]
});
if(container.data.addresses[i].isPrimary=="Y"){
addresses.insert(0, address);
}else{
addresses.add(address);
}
}
container.add(addresses);
}
container.doLayout();
}

this panel is housed in a main app Panel:


DoProspectListApp.prototype.showProspect=function(){
this.prospectList.destroy();
this.mainToolbar.setTitle('');
this.mainToolbar.add(new Ext.Button({
ui: 'back',
text: 'All Prospects',
handler: function(b,e){
mobileApp.doProspectListApp.showList();
}
})
);
this.mainToolbar.doLayout();
this.prospectPanel = this.prospect.createPanel();
this.appPanel.add(this.prospectPanel);
this.appPanel.doLayout();
}

If any of you Sencha gurus see something obvious that needs to be added in order for this layout to be correctly sized, you would be a godsend.

Thanks,
Jesse