Custom FieldLabel on a CompositeField

Question

I attempting to produce a large list of fields, all with a Min, Max and Accuracy. Unfortunately, some of these fields need to have units attached to them such as time. I'd like to be able to display this without having to add another column for units, so my thought was to include this in the fieldLabel.

I'm doing this with CompositeFields, 2 textfields, a displayfield and then another textfield.

This is a mock up of what I'm trying to do... Mockup Image

Is this a viable option, or do I need to find a different way to go about this?

Currently, my code has a [secs ^] in place of the actual combo box, but you can see above I'm trying to do.

I've also tried to use a combo box as the field label, but ended up with [Object object] in place of the actual fieldLabel.

Code:

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'
        }]
    }]
});

Does anyone have a suggestion on how to go about this?

Answer 1

I don't think it is possible to do what you're proposing using a composite field and field label. Field labels are strictly for text, which is why you're seeing the [Object object].

However, if you are trying to avoid an extra column, you could try changing the fieldLabel's Xtemplate to include a dropdown (though, I would advocate that designing your app differently would work better than this).