How to prevent triggers from cutting off so much of the text field?

Question

As an example, this is code which provides a clear trigger for one text field, and not for the other, as a comparison:

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'fname',
        fieldLabel: 'First Name',
        triggers: {
            clear: {
                cls: 'fa fa-times',
                handler: function(me) {
                    me.setValue('');
                }
            }
        }
    },{
        xtype: 'textfield',
        name: 'lname',
        fieldLabel: 'Last Name'
    }]
});

When you run it, the clear trigger is way in the middle of the field, and physically reduces its width. (I typed Xs to demo.)

I'd like the trigger much farther to the right, with the text field expanded accordingly. Is there a way to do this?

Answer 1

Use x-fa class instead of fa (cls: 'x-fa fa-times')