PDA

View Full Version : Problem with FieldContainer using hbox layout



jonas007
14 Feb 2012, 5:20 AM
I want to replace the CompositeField from Ext3. So I used the FieldContainer. When I add directly to the FormPanel, everthing is good. But when I add them to another container an add this container to the FormPanel then only the labels are there. The elements of the Field Containers are gone. When I remove the hbox-layout of the FieldContainer, it works fine.
Is there any way to use the FieldContainer with hbox Layout and not setting them directly as a child of the FormPanel?

mitchellsimoens
14 Feb 2012, 5:33 AM
Are you giving the fieldcontainer a width/flex?

jonas007
14 Feb 2012, 6:42 AM
No.
You can comprehend my problem by using the live preview http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.FieldContainer and make a 'container' arround the two fieldContainers like this


Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
items: [{
xtype: 'container',
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Last Three Jobs',
layout: 'hbox',
items: [{
xtype: 'textfield'
}, {
xtype: 'textfield'
}, {
xtype: 'textfield'
}]
}]
}],
renderTo: Ext.getBody()
});

mitchellsimoens
14 Feb 2012, 6:46 AM
Ok... the fieldcontainer doesn't know what size to show. It's parent container needs to use a layout like:


Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
items: [{
xtype: 'container',
layout : 'anchor',
items: [{
xtype: 'fieldcontainer',
anchor : '100%',
fieldLabel: 'Last Three Jobs',
layout: 'hbox',
items: [{
xtype: 'textfield'
}, {
xtype: 'textfield'
}, {
xtype: 'textfield'
}]
}]
}],
renderTo: Ext.getBody()
});

Or if you don't need that container then you can unnest:


Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
items: [{
xtype: 'fieldcontainer',
anchor : '100%',
fieldLabel: 'Last Three Jobs',
layout: 'hbox',
items: [{
xtype: 'textfield'
}, {
xtype: 'textfield'
}, {
xtype: 'textfield'
}]
}],
renderTo: Ext.getBody()
});

jonas007
14 Feb 2012, 6:52 AM
Thank you. Seems that the problem was solved. I am very pleased thank you. :)