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;'，该属性设置为对象中属性的每个项目。

如果宽度发生变化，面板将始终将组合包裹起来，我更新了小提琴，告诉您可以毫无问题地调整大小。

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

1 个答案: