패널에 동적으로 자동으로 패널 추가하기

Question

패널에 동적으로 패널을 추가하고 싶습니다. 추가해야 할 패널의 수를 미리 알고 싶지 않기 때문입니다.

내가

panel.insert(<panel to be added>); 

부모 패널이 hbox에 레이아웃 구성을 할 경우는 잘 작동합니다.

그러나 추가 된 패널의 전체 너비가 부모 패널 너비를 초과하면 오버플로가 발생하고 가로 스크롤 막대가 나타납니다.

대신 부모 패널 너비에 도달하면 패널을 다음 줄에 자동으로 추가해야합니다.

위의 문제에 대한 해결책은 여기에 다른 레이아웃을 사용해야하지만 확실하지 않을 수 있습니다.

감사

Answer 1

상위 패널 레이아웃 지정된 열 번호 테이블이어야한다. 부모 패널

{ 
    xtype: 'panel', 
    itemId: 'productListPanel', 
    height: 500, 
    width: 600, 
    layout: { 
     type: 'table', 
     columns: 3 
    }, 
    autoScroll: true 
} 

위해 다음 코드를 참조하는 것은 지금 내가 그것을 자식 패널의 수를 추가 할 수 있습니다, 다음 코드를 참조하십시오.

for (var i = 0; i < 10; i++) { 
      var panel = Ext.create('Ext.panel.Panel', { 
       width: 190, 
       height: 150, 
       padding: 10,     
       cls: 'myPanel', 
       title: "Child Panle"+i 
       }); 
       parentPanel.insert(panel); 
      } 

이렇게하면 내 문제가 해결되어 누군가에게 도움이되기를 바랍니다.

감사합니다.

Answer 2

내가 한 생각을 가지고 있지만 그 다음 날 결과를 알려 코드에서 시도해야합니다. 기본적으로 레이아웃 유형을 auto으로 설정하십시오.

var resultsPanel = Ext.create('Ext.panel.Panel', { 
    title: 'Results', 
    width: 600, 
    height: 400, 
    id: 'panel_one', 
    renderTo: Ext.getBody(), 
    layout: { 
     type: 'auto',  // Arrange child items vertically 
     align: 'stretch', // Each takes up full width 
     padding: 5 
    } 
}); 

var opanel = Ext.getCmp('panel_one'); 
console.log(opanel); 
opanel.add([ 
    { 
     xtype: 'panel', 
     title: 'Inner Panel', 
     width: Ext.getCmp('panel_one').getWidth(), 
     height: 100 
    } 
]); 

opanel.add([ 
    { 
     xtype: 'panel', 
     title: 'Inner Panel', 
     width: Ext.getCmp('panel_one').getWidth() 
     height: 100 
    } 
]);