Question

我正在尝试将组件动态添加到指定了hbox布局的容器中并让容器重新调整大小以适应新组件。目前添加了新组件，但新旧组件在其中重新调整大小/或平铺容器和容器保持其大小。

以下是jsfiddle上我遇到的问题的演示。

以下是演示的相关extjs4 javascript：

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

我找到了一个合适的解决方案，我的理由是你不能在hbox容器中动态扩展vbox。额外的好处是这种方法可以让你摆脱一个级别的嵌套。另外，使用布局属性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()
});
});

添加功能后，Vbox容器不会调整大小。 Extjs4

1 个答案: