Extjs 在容器中包装多个组合框

Question

我有许多组合框，它们采用流畅的布局，彼此并排显示

如果组合框不足以 space 并排显示，我希望组合框在下方环绕。

这是我目前所拥有的 fiddle - 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 是有效的 fiddle.

将样式应用于面板，然后每个组件都会根据面板的默认值属性获取 style:'float:left;'，这会为每个项目设置对象中的属性。

如果宽度发生变化，面板将始终包裹组合，我更新了 fiddle 以向您展示您可以毫无问题地调整它的大小。

Extjs 在容器中包装多个组合框

Extjs wrapping multiple combo boxes in a container

extjs

extjs5