What is the best way to display text just after a TextField?

Question

I'm creating a formpanel with items created via xtype (not calling new for each items). I'd like to add a precision at the right of the TextField.

I managed to do it by setting a CompositeField containing the TextField + a standard Panel, but is there a better way, like a property in the TextField I would have missed or a better alternative ?

Thanks for your help ! :)

new Ext.form.FormPanel ({
    'id':                   'create-form',
    'header':               true,
    'headerAsText':         true,
    'hideCollapseTool':     true,
    'title':                'New Component',
    'width':                550,
    'style':                'margin: 100px auto',
    'labelWidth':           200,
    'items': [
        {
            'items': [
                {
                    'xtype':            'textfield',
                    'fieldLabel':       'Duration (in hours)',
                    'name':             'name'
                }
            ]
        }
    ]
});

Solution 1

If you need it for one field only, a CompositeField is fine. However, do you really need a whole new Panel for the text - wouldn't a regular Label suffice?

If you need a more reusable solution, have a look at the fieldTpl config option of FormLayout. You could modify the template and add a special section after the field, in which to display the additional information.

Solution 2

I'm not aware of a property that'll do what you want with a panel on the right. If it's something you're doing more than once, though, consider making your own type for it:

Ext.ns('Ext.ux.form');

Ext.ux.form.DurationField = Ext.extend(Ext.form.CompositeField, {
  constructor: function(cfg) {
    cfg = Ext.applyIf(cfg || {}, {
      items: [ /** blah blah */ ]
    });
    Ext.ux.form.DurationField.superclass.constructor.call(this, cfg);
  }
});

Ext.reg('durationfield', Ext.ux.form.DurationField);

That will let you use durationfield as though it were a first class citizen.

Solution 3

You could also use a Ext.form.DisplayField (xtype displayfield) inside your composite field to display some static text.

Comments

[Cyril N.]

Thanks for the idea of using a Label instead. I'll try that one.

[Cyril N.]

Your answer is great and would be perfect but I have many other details to set at the right (hours was just an example, sorry I wasn't more precise :/). I gave you a +1 for the great idea :). thanks!