How to add image in EXTJS textfield for empty text

Question

Team.

Does anyone know how to add image inside extjs textfield

Basically I have text field where I am showing empty text by default and besides that I want to put one image ( Image should be inside text field.) is there any way to do it.

Do you mean an image that indicates that this is a required field? — Juan Mendes

Vlad Vlad · Accepted Answer · 2013-01-25T19:46:26

Ext 4.1

Your field:

    {
        xtype: 'textfield',
        fieldLabel: 'Field with image',
        emptyText: 'placeholder text', // important, or image will not show
        name: 'name',
        emptyCls: 'empty-text-field'
    }

Your css:

.empty-text-field {
    background-image:url(/images/cross.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}

If you want show images in all empty text fields, you only have to add this css:

.x-form-empty-field {
    background-image:url(/images/cross.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}

(x-form-empty-field is the default emtptyCls for a form field)

don't forget the emptyText

screenshot

How to add image in EXTJS textfield for empty text

1 Answers