如何实现ExtJS中DisplayField的多行布局：每行两个字段

要让指定的DisplayField实现同行+分行的布局效果，核心是利用ExtJS的布局系统对组件进行分组控制。我们可以通过嵌套容器，结合hbox（水平布局）和vbox（垂直布局）来轻松实现需求：

• 把需要同一行的DisplayField放到一个使用hbox布局的容器中
• 再将这些分组容器放到表单的items里，外层表单用vbox布局控制行的垂直排列

下面是修改后的完整代码，注释已经标注关键逻辑：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 450,
    height: 450,
    bodyPadding: 10,
    title: 'Final Score',
    layout: 'vbox', // 外层垂直布局，控制两行容器的上下排列
    defaults: {
        margin: '0 10 10 0' // 给组件添加间距，让布局更美观
    },
    items: [
        // 第一行：两个DisplayField同行显示
        {
            xtype: 'container',
            layout: 'hbox', // 水平布局，让内部组件横向排列
            items: [
                {
                    xtype: 'displayfield',
                    fieldLabel: 'Home',
                    name: 'home_score',
                    value: '10',
                    flex: 1 // 可选配置，让组件平分容器宽度
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: 'Visitor',
                    name: 'visitor_score',
                    value: '11',
                    flex: 1
                }
            ]
        },
        // 第二行：另外两个DisplayField同行显示（补充了你代码里未完成的部分）
        {
            xtype: 'container',
            layout: 'hbox',
            items: [
                {
                    xtype: 'displayfield',
                    fieldLabel: 'Home',
                    name: 'home_extra',
                    value: '5',
                    flex: 1
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: 'Visitor',
                    name: 'visitor_extra',
                    value: '3',
                    flex: 1
                }
            ]
        }
    ]
});

关键细节说明： #

• hbox布局：负责让容器内的组件水平排列，实现同行显示的核心
• vbox布局：外层表单使用该布局，确保两行容器垂直分布
• flex属性：可选配置，用于让同行的组件自动平分容器宽度，避免布局错位；如果不需要平分宽度，也可以直接设置width属性来控制每个DisplayField的尺寸
• 容器嵌套：通过container组件对需要同行的DisplayField进行分组，让表单的布局逻辑更清晰

内容的提问来源于stack exchange，提问作者David