Vboxコンテナは、追加機能の後にサイズ変更されません。 Extjs4

Question

私は、hboxレイアウトが と指定されたコンテナにコンポーネントを動的に追加しようとしています。新しいコンテナに対応するためにそのコンテナのサイズを変更してください。現在、 新しいコンポーネントが追加されていますが、新しいコンポーネントと古いコンポーネントは コンテナにサイズ変更またはタイルされ、コンテナはサイズを維持します。

ここに私がjsfiddleにある問題のデモンストレーションがあります。ここ

デモに関連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コンテナ内で動的に展開することはできません。追加のメリットは、このメソッドを使用すると、1つのレベルの入れ子を取り除くことができることです。また、レイアウトプロパティー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() 
}); 
});​