Question

我试图生成一个大的字段列表，所有字段都具有Min，Max和Accuracy。不幸的是，其中一些字段需要附加单元，例如时间。我希望能够显示这个而不必为单位添加另一列，所以我的想法是将其包含在fieldLabel中。

我正在使用CompositeFields，2个文本字段，一个显示字段，然后是另一个文本字段。

这是我想要做的事情的模拟...... Mockup Image

这是一个可行的选择，还是我需要找到一种不同的方法来解决这个问题？

目前，我的代码有一个[secs ^]代替实际的组合框，但你可以看到我正在尝试做的上面。

我还尝试使用组合框作为字段标签，但最后用[Object object]代替实际的fieldLabel。

代码：

Ext.FormPanel({
    frame: true,
    layout: 'form',
    border: 'false',
    padding: '15 50 15 50',
    labelAlign: 'right',
    items: [{
        xtype: 'compositefield',
        msgTarget: 'side',
        labelStyle: 'width:220px',
        anchor: '-140',
        defaults: {
            flex: 1,
        },
        items: [{
            xtype: 'displayfield',
            style: 'text-align:center',
            value: 'Min'
        }, {
            xtype: 'displayfield',
            style: 'text-align:center',
            value: 'Max'
        }, {
            xtype: 'displayfield',
            width: '20px'
        }, {
            xtype: 'displayfield',
            style: 'text-align:center',
            value: 'Accuracy'
        }]
    }, {
        xtype: 'compositefield',
        fieldLabel: 'Average Percent Completed',
        labelStyle: 'width:220px',
        anchor: '-140',
        msgTarget: 'side',
        defaults: {
            flex: 1
        },
        items: [{
            xtype: 'numberfield',
            mode: 'local',
            name: 'percentMin'
        }, {
            xtype: 'numberfield',
            mode: 'local',
            name: 'percentMax'
        }, {
            xtype: 'displayfield',
            value: '+/-',
            width: '20px'
        }, {
            xtype: 'numberfield',
            mode: 'local',
            name: 'percentAcc'
        }]
    }, {
        xtype: 'compositefield',
        fieldLabel: 'Average Time [sec ^]',
        msgTarget: 'side',
        labelStyle: 'width:220px',
        anchor: '-140',
        defaults: {
            flex: 1
        },
        items: [{
            xtype: 'numberfield',
            mode: 'local',
            name: 'avgTimeMin'
        }, {
            xtype: 'numberfield',
            mode: 'local',
            name: 'avgTimeMax'
        }, {
            xtype: 'displayfield',
            value: '+/-',
            width: '20px'
        }, {
            xtype: 'numberfield',
            mode: 'local',
            name: 'avgTimeAcc'
        }]
    }]
});

有没有人建议如何解决这个问题？

Answer 1

我认为不可能使用复合字段和字段标签来执行您提议的操作。字段标签严格用于文本，这就是您看到[对象]的原因。

但是，如果您要避免使用额外的列，可以尝试更改fieldLabel's Xtemplate以包含下拉列表（但是，我会主张以不同的方式设计您的应用程序会比这更好）。

CompositeField上的自定义FieldLabel

1 个答案: