Extjs оборачивать несколько ящиков комбо в контейнере

Question

У меня есть ряд комбинированных окон в макете жидкости, которые появляются рядом друг с другом

Я хотел комбо коробки, чтобы обернуть под, если не хватает места, чтобы показать их рядом друг с Другие.

Вот скрипка, что я до сих пор - https://fiddle.sencha.com/#view/editor&fiddle/1mn1

Элементы правильно выравнивать в контейнере с макетом HBox, но не оборачивая перелив, кажется, не происходят.

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;' по умолчанию свойства панели, которое устанавливает для каждого элемента свойства объекта.

Панель всегда будет помещать комбо, завернутые в случае изменения ширины, я обновил скрипку, чтобы показать вам, что вы можете без проблем изменить ее размер.