javascript - 如何获取不同行中的显示字段

Question

我可以在我的代码中看到我只得到垂直显示字段。我希望我的两个显示字段在一行中，另外两个在下一行中。如何获得这个。

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 450,
    height: 450,
    bodyPadding: 10,
    title: 'Final Score',
    items: [{
        xtype: 'displayfield',
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    },{
        xtype: 'displayfield',
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    },{
        xtype: 'displayfield',
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    }, {
        xtype: 'displayfield',
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    }],
    buttons: [{
        text: 'Update'
    }]
});

Answer 1

可以将显示字段分组到字段容器中，如下例所示:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 450,
    height: 450,
    bodyPadding: 10,
    title: 'Final Score',
    layout: 'vbox',
    items: [
    {
        xtype: 'fieldcontainer',
        layout: 'hbox',
        items: [
            {
                xtype: 'displayfield',
                fieldLabel: 'Home',
                name: 'home_score',
                value: '10'
            },
            {
                xtype: 'displayfield',
                width: 5
            },  
            {
                xtype: 'displayfield',
                fieldLabel: 'Visitor',
                name: 'visitor_score',
                value: '11'
            }
        ]
    },
    {
        xtype: 'fieldcontainer',
        layout: 'hbox',
        items: [
            {
                xtype: 'displayfield',
                fieldLabel: 'Home',
                name: 'home_score',
                value: '10'
            },
            {
                xtype: 'displayfield',
                width: 5
            },  
            {
                xtype: 'displayfield',
                fieldLabel: 'Visitor',
                name: 'visitor_score',
                value: '11'
            }
        ]
    }
    ],
    buttons: [{
        text: 'Update'
    }]
});

该示例是使用 ExtJS 4.2 进行测试的。