javascript - CompositeField上的自定义FieldLabel

我试图产生一个包含最小值，最大值和准确度的大字段列表。不幸的是，其中一些字段需要附加单位，例如时间。我希望能够显示此信息而不必为单位添加另一列，因此我想将其包括在fieldLabel中。

我正在使用CompositeFields，2个文本字段，一个displayfield和另一个文本字段来进行此操作。

这是我想做的事的模拟...
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'
        }]
    }]
});

有人对如何解决这个问题有任何建议吗？

最佳答案

我认为无法使用复合字段和字段标签来完成您的建议。字段标签严格用于文本，这就是为什么看到[Object object]的原因。

但是，如果要避免增加多余的列，则可以尝试更改fieldLabel's Xtemplate以包含一个下拉列表（尽管我主张以不同的方式设计应用程序会比这更好）。

关于javascript - CompositeField上的自定义FieldLabel，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4736400/