PDA

View Full Version : Panel with Column layout does not show up correct when added to items.



wpoosanguansit
4 Mar 2011, 7:53 AM
First off, thanks for your help.

I am creating a panel with layout column and the panel with form input fields show up correctly when the panels are created using new. However they do not show up correctly when it is done programmatically - added into the items list of the parent panel. I am not sure why is this the case.

Here is the snippet:

var UploadPanel = Ext.extend(Ext.Panel, {
layout:'column',
//bodyStyle:'padding:0 0 0 0; margin: 0 -30px 0 0',
//autoWidth: true,
initComponent: function() {
Ext.apply(this, {
items:[{
columnWidth:.6,
layout: 'form',
items: [ { xtype: 'fileuploadfield', cls: 'event-image-files', fieldLabel: 'Event Image Files', width: 450, buttonText: 'Select a File' }
]
},{
columnWidth:.2,
layout: 'form',
items: [{
xtype:'spacer',
height: 10,
width: 25
}]
},{
columnWidth:.2,
layout: 'form',
items: [{ xtype: 'button',
text: '- Remove',
width: '50px',
handler: function(button, event) {
button.ownerCt.ownerCt.ownerCt.remove(button.ownerCt.ownerCt);
}
}]
}]
});
UploadPanel.superclass.initComponent.call(this);
}
});

The screenshots show the event image file fields when created with new initialization in the first screenshot and through the add more file functional call in the second screenshot. The add function just add the new UploadPanel to the items list.

Appreciate your help.

Animal
5 Mar 2011, 10:23 PM
You do not need to wrap input fields with form layout Containers in 4.0.