Vbox container doesn't resize after add function. Extjs4 - extjs4

Question

I'm trying to dynamically add a component to a container with the hbox layout specified
and have that container re-size itself to accommodate the new component. Currently the
new component is added, but the new and old components are re-sized / or tiled in the
container and the container maintains its size.
Here is a demonstration of the issue I'm having on jsfiddle.
Here is the relevant extjs4 javascript for the demo:
Ext.onReady(function(){
Ext.create ('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
items: [
{
xtype: 'container',
layout: 'hbox',
padding : 5,
items: [
{
xtype: 'container',
id: 'textfieldgroup',
flex: 1,
height: '100%',
border: false,
layout: {
type: 'vbox',
},
defaults: {
flex: 1,
},
items: [
{
xtype: 'textfield',
emptyText: 'type here',
},
],
},
{
xtype: 'button',
flex: .1,
text: '+',
listeners: {
'click' : function () {
var textFieldGroup =
Ext.ComponentQuery.query ('#textfieldgroup')[0];
var newTextField = Ext.widget ('textfield');
textFieldGroup.add (newTextField);
},
}
}
]
}
],
renderTo: Ext.getBody ()
});
});

Answer 1

I have found a suitable solution and my reasoning is that you cannot have a vbox dynamically expand within an hbox container. The added benefit is that this method enables you get rid of one level of nesting. Also using the layout property autoSize: true enables the vbox container to expand and dynamically re-size itself.
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
layout: 'vbox',
items: [
{
xtype: 'fieldset',
flex: 1,
title: 'Group of fields',
width: '100%',
items: [
{
xtype: 'container',
layout: 'hbox',
width: '100%',
items: [
{
flex: 1,
xtype: 'label',
text: 'Fields',
},
{
xtype: 'button',
flex: 1,
text: '+',
listeners: {
'click': function() {
var textFieldGroup =
Ext.ComponentQuery.query('#textfieldgroup')[0];
var newTextField = Ext.widget('textfield');
textFieldGroup.add(newTextField);
},
}}
]
},
{
xtype: 'container',
layout: {
type: 'vbox',
autoSize: true,
},
id: 'textfieldgroup',
defaults : {
// flex: 1,
},
items : [
{
xtype: 'textfield',
emptyText: 'type here',
}
]
}
]}
],
renderTo: Ext.getBody()
});
});​
​