添加功能後，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

回答

相關問題