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

可以在fieldcontainers中对显示字段进行分组，如下例所示：

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测试该示例。

Answer 2

如何获得此

您可以使用hbox和column布局获得所需的结果。

列是用于以多列格式创建结构布局的首选布局样式，其中每列的宽度可以指定为percentage或{{1但是，允许高度根据内容而变化。此类旨在通过fixed width Ext.container.Container#layout配置进行扩展或创建，通常不需要通过new关键字直接创建。
hbox 布局，用于在Ext.container.Container之间水平排列项目。此布局可选地在包含数字弹性配置的子项之间划分可用的水平空间。

在 FIDDLE 中，我使用两种布局创建了一个演示。我希望这有助于/指导您实现您的要求。

栏目布局代码SNIPPET

layout:'column'

HBOX布局代码SNIPPET

//Usng column layout
Ext.create('Ext.form.Panel', {

    layout: 'column',

    bodyPadding: 10,

    title: 'Final Score',

    renderTo: Ext.getBody(),

    defaults: {
        columnWidth: '.5',
        xtype: 'displayfield',
    },

    items: [{
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    }, {
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    }, {
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    }, {
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    }],
    buttons: [{
        text: 'Update'
    }]
});

如何在不同的行中获取Displayfields

2 个答案: