I have a search textfield in my toolbar. I want to add an image inside textfield (search icon at the left most) instead of some text.

Please provide some ideas to achieve this.

I have a search textfield in my toolbar. I want to add an image inside textfield (search icon at the left most) instead of some text.

Please provide some ideas to achieve this.

• javascript
• extjs

2 Answers 2

I would remend you use font-awesome to load your icons. Once the Font Awesome library has been added, you should do something like this:

Fiddle: https://fiddle.sencha./#fiddle/mmp

Ext.create('Ext.Panel',{
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    title: 'Testing Panel',
    html : 'Contents of the Testing Panel',
    bodyPadding: 10,
    tools:[{
        xtype : 'textfield',
        fieldStyle : 'font-family: FontAwesome',
        emptyText: '\uF002 Find User'
    }]
});

In my situation, I needed the icon to always be present, so this is the solution I came up with (Fiddle):

JS

Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 500,
    title: 'Testing Panel',
    html: 'Contents of the Testing Panel',
    bodyPadding: 10,
    tools: [{
        xtype: 'textfield',
        cls: 'icon-textfield fa fa-search',
        emptyText: 'Find User'
    }]
});

CSS

.icon-textfield:before {
    position: absolute;
    height: 100%;
    z-index: 9999;
    left: 5px;
    font-size: 12px;
    top: 25%;
}

.icon-textfield .x-form-text {
    padding-left: 20px;
}