PDA

View Full Version : [SOLVED] Combo boxes not displaying when FormPanel initially collapsed



aghextjs
5 Apr 2010, 11:17 AM
Hi-

I have FormPanel that is rendered to the north section of a border layout that is initially collapsed. I have been playing with the UI to add an image directly to the right of the first combo box and it works great, as long as I set collapsed:false on the FormPanel. If I set collpased:true, the combo boxes don't display correctly when the FormPanel is expanded. If you click the label the input field displays directly over the label. I've tried adding forceLayout: true to various levels but it doesn't seem to change anything.

Any ideas what I am doing wrong or tips on how to debug this type of layout issue?

There should be some images below of what it looks like when it is working and when it is not.

Here is the code of the FormPanel:


seachPanel:function(searchMsgPanel){
return new Ext.form.FormPanel({
id:'search-form',
border:false,
labelAlign: 'right',
autoScroll: true,
bodyStyle: 'padding:10px',
region:'north',
height:150,
collapsed:true,
items:[
searchMsgPanel,
{
xtype: 'container',
layout:'column',
forceLayout: true,
width:480,
defaults: {
border:false,
labelWidth: 75,
defaultType: 'textfield',
layout: 'form'
},
items:[
{
// Column 1
columnWidth: '.5',
items: [
{
anchor: '-2',
xtype: 'container',
layout: 'column',
items: [
{
columnWidth: 1,
xtype: 'container',
layout: 'form',
items: [
{
xtype:'combo'
,fieldLabel:'Activity'
,store:['Item 1', 'Item 2']
,anchor: '-4'
}
]
},{
xtype: 'box',
id: 'destinationToolTip',
style: 'margin-top: 3px',
autoEl: { tag:'div',children:[destinationsComboTooltipImg] }
}]
},
{
anchor: '-20', fieldLabel: 'NIIN',name: 'niin',msgTarget: 'side',
minLength:3,minLengthText:'Please enter minimum of 3 character'
},
{
anchor:'-20',fieldLabel: 'Priority',name: 'priority',msgTarget: 'side',
minLength:1,minLengthText:'Please enter minimum of 1 character'
}
]
},

{
// Column 2
columnWidth: '.5',
labelWidth: 90,
items: [{
anchor: '-20',
xtype:'textfield',fieldLabel: 'Requisition No',name: 'requisitionNo',msgTarget: 'side',
minLength:3,minLengthText:'Please enter minimum of 3 character'
},statusCombo, {
anchor: '-20',
xtype:'textfield',fieldLabel: 'Demand',name: 'demand',msgTarget: 'side',
minLength:1,minLengthText:'Please enter minimum of 1 character'
}]
}]
}]
});
}

Thanks!

aghextjs
6 Apr 2010, 7:06 AM
A good nights sleep and some more searching around the forums and I was available to solve my issue using this thread: http://www.extjs.com/forum/showthread.php?t=63985. When a panel is collapsed and have the style display:none, widths of containers are not correctly calculated.