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

나는 적절한 솔루션을 찾았고 나의 추론은 당신이 hbox 컨테이너 안에서 vbox를 동적으로 확장 할 수 없다는 것이다. 추가 된 이점은이 방법을 사용하면 한 단계의 중첩을 제거 할 수 있다는 것입니다. 또한 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() 
}); 
});​