EXTJS包裝多個組合框在容器

Question

我有一個流體佈局的一些組合框出現相互並排

我想組合框下方包裹，如果有足夠的空間來顯示它們並排其他。

這裏是什麼，我至今小提琴 - https://fiddle.sencha.com/#view/editor&fiddle/1mn1

的項目與佈局橫向盒容器正確對齊，但沒有包裝溢出似乎發生。

Ext.create('Ext.panel.Panel', { 
title: 'Combo boxes', 
width: '100%', 
layout: 'vbox', 
items: [{ 
    xtype: 'container', 
    layout: 'hbox', 
    items: [{      
     xtype:'combo', 
     store: states, 
     displayField: 'name', 
     valueField: 'abbr'    
    }, 
    {      
     xtype:'combo', 
     store: states, 
     displayField: 'name', 
     valueField: 'abbr'    
    }, 
    {      
     xtype:'combo', 
     store: states, 
     displayField: 'name', 
     valueField: 'abbr'    
    }, 
    {      
     xtype:'combo', 
     store: states, 
     displayField: 'name', 
     valueField: 'abbr'    
    }] 
}],   
renderTo: Ext.getBody() 

}）;

如何獲取組合框按要求包裝？

Answer 1

// The data store containing the list of states 
var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data: [{ 
      "abbr": "AL", 
      "name": "Alabama" 
     }, { 
      "abbr": "AK", 
      "name": "Alaska" 
     }, { 
      "abbr": "AZ", 
      "name": "Arizona" 
     } 
     //... 
    ] 
}); 
Ext.create({ 
    xtype: 'viewport', 
    renderTo: Ext.getBody(), 
    items: [ 
     Ext.create('Ext.panel.Panel', { 
      title: 'Combo boxes', 
      style: 'display: flex;', 
      defaults: { 
       style: 'float:left;' 
      }, 
      items: [{ 
       xtype: 'combo', 
       store: states, 
       displayField: 'name', 
       valueField: 'abbr' 
      }, { 
       xtype: 'combo', 
       store: states, 
       displayField: 'name', 
       valueField: 'abbr' 
      }, { 
       xtype: 'combo', 
       store: states, 
       displayField: 'name', 
       valueField: 'abbr' 
      }, { 
       xtype: 'combo', 
       store: states, 
       displayField: 'name', 
       valueField: 'abbr' 
      }] 
     }) 
    ] 
}); 

Here是一個工作小提琴。

樣式應用於面板，然後每個組件通過面板的默認屬性獲取style:'float:left;'，該屬性爲對象中的每個項目設置屬性。

如果寬度發生變化，面板將始終將組合包裹，我更新了小提琴以向您顯示您可以調整大小而不會出現問題。