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

我试图动态地将组件添加到指定为的hbox布局的容器中，并让该容器重新调整大小以容纳新组件。目前添加了新组件，但新旧组件在容器中重新调整大小或平铺，并且容器保持其大小。添加功能后，Vbox容器不会调整大小。 Extjs4

这是我在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()   
});

}）;

来源

2012-03-06 Michael Dillon

我发现了一个合适的解决方案，我的推理是你不能在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() 
}); 
});

来源

2012-03-06 16:15:55

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

回答

相关问题