Размер контейнера Vbox не изменяется после добавления функции. Extjs4

Question

Я пытаюсь динамически добавить компонент в контейнер с указанным макетом hbox, и этот контейнер изменяет размер самого себя для размещения нового компонента.В настоящее время новый компонент добавлен, но новые и старые компоненты в контейнере изменены или выложены плиткой, и контейнер сохраняет свой размер.

Вот демонстрация проблемы, с которой я столкнулся на jsfiddle .

Вот соответствующий javascript extjs4 для демонстрации:

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

Я нашел подходящее решение, и я считаю, что вы не можете динамически расширять vbox в контейнере hbox. Дополнительным преимуществом является то, что этот метод позволяет избавиться от одного уровня вложенности. Также использование свойства layout autoSize: true позволяет контейнеру vbox расширяться и динамически изменять размер самого себя.

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()
});
});​

1005 *