Results 1 to 4 of 4

Thread: Add icon as place holder in a textfield

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2016
    Posts
    33

    Default Add icon as place holder in a textfield

    Hi,

    I am using ExtJS 6.5.3 and i would like to place a pictos/fontawesome icon in a textfield as a empty placeholder. Tried a few solutions given in other posts but they do not work.
    Would appreciate any suggestions.

    regards
    Nitesh

  2. #2

    Join Date
    Dec 2013
    Location
    Italy
    Posts
    88
    Answers
    9

    Default

    Hi, to use font icons in the input placeholder you just need to add the font-family style and use the html value of the character inside the emptyText property. The problem is that the Text component will encode the html chars of the placeholder before to render the field.

    An easy solution could be to define a simple extension of the Text component to just remove the html encoding of placeholder text and use it when you need an icon in the placeholder.
    Code:
    Ext.define('MyApp.view.components.MyText', {
        extend: 'Ext.form.field.Text',
        xtype: 'mytext',
    
    
        emptyCls: 'form-empty-field-icon',
    
    
        getSubTplData: function () {
            const data = this.callParent(arguments);
            data.placeholder = Ext.String.htmlDecode(data.placeholder);
            return data;
        }
    });
    Code:
    .form-empty-field-icon::placeholder {
      font-family: FontAwesome;
    }


    The you can use it like this:
    Code:
     ...
    {
        xtype: 'mytext',
        name: 'searchText',
        fieldLabel: 'Search',
        emptyText: ''
    },
    ...

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2016
    Posts
    33

    Default

    Hi Baron,

    Thanks for your reply. I am using the Modern toolkit and not the Classic toolkit.
    Could not find the component Ext.form.field.Text in the modern toolkit.
    I am using the component Ext.field.Text (xtype: textfield) in the modern tool kit.

    regards
    Nitesh

  4. #4

    Join Date
    Dec 2013
    Location
    Italy
    Posts
    88
    Answers
    9

    Default

    Hi,
    I realized that is easier to specify the unicode character using the javascript encoding (\u<code>) instead of html one. This approach should work for both modern and classic.

    Modern
    Code:
    {
                    xtype: 'textfield',
                    label: 'Search',
                    cls: 'form-empty-field-icon',
                    placeholder: '\uf002 Search'
    }
    Classic
    Code:
    {
                    xtype: 'textfield',
                    fieldLabel: 'Search',
                    cls: 'form-empty-field-icon',
                    emptyText: '\uf002 Search'
    }
    Style
    Code:
    .form-empty-field-icon {
      input::placeholder {
        font-family: FontAwesome;
      }
    }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •