動態地在面板內添加面板自動調整

Question

我想動態地在面板內添加面板，因爲我不知道我需要添加的面板數量。

，如果我做

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

父面板配置了橫向盒佈局也能正常工作。

但是，如果添加面板的總寬度超出了父面板寬度，那麼會出現溢出並出現水平滾動條。

相反，我所看到的是它應該將面板自動添加到下一行，如果它達到父面板的寬度。

上述問題的任何解決方案，可能是我需要在這裏使用一些其他佈局，但不能確定。

感謝

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 
    } 
]);