ExtJS Form Field Icon Plugin


This plugin adds a highly configurable icon to the form field. The icon can be used as an indicator of a tooltip with the description, or it can be configured as clickable to trigger an action on the field or to display a custom context menu.

Live Demo

Live Demo ExtJS 5

Main Features

  • supports font, css and image icons
  • configurable position: before/after label, before/after input
  • supports both quick tips and rich tooltips
  • fires click events to trigger actions
  • plugs in any form field

Design Goals

The main design goal was to easily display an icon next to the field that would serve as a target for quicktip for I needed to display a verbose field description.

The icon should be a font icon as standard bitmap icons just do not look good anymore.

Later, I’ve added events to the icon so that an action can be triggered (on left click), or a context menu can be shown (on right click).

Quick Start Guide

  1. Extract the downloaded zip file anywhere in your http server accessible folder
  2. Navigate to http://localhost/where-you-unzipped/saki-field-icon/docs
  3. Follow the instructions in the Getting Started Guide


The package contains two versions:

  • ExtJS 4
  • ExtJS 5


Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestEmail this to someone


  1. Robert Brierley says

    Do you have any plans in the future to release the sample files created in Sencha Architect 3.
    This would be a great value for developers like myself trying to get up to speed in hand coding

    • says

      Do you mean plugin packed for Architect? I have setup the architect packager for Ext 4 and I have tested it so it works. I can use the same packager to pack 5.x version and sent it to you by e-mail if you have purchased the plugin.

      I haven’t tested it yet with 5.x compatible architect, though.

      Just drop us an e-mail if you are interested.

    • says

      Thank you for the bug report Hans, I’ll fix it soon. Meanwhile, you can use position:”afterLabel” the is workable (Actually it is the only one that works).

      • Hans Dampf says

        Awesome, thanks! How can I get an updated version once you fixed it (I’ve bought the “1 developer” license)?

        • says

          It’s a bit more to it than I expected, the markup is entirely different when label is at the top. We’ll let you know when then new fixed version will be out.

          • Hans Dampf says

            Any news regarding the fix? Also, how can I get access to the ExtJS5 version? The download links I got in my confirmation mail are not valid anymore (obviously)

  2. Maciej Zabielski says


    destroy:function() line 437 in icon.js will throw
    Uncaught Error: “Ext.dom.Element#removeAllListeners” is deprecated. Please use “clearListeners” instead.

    on ExtJS 5.1

    Any ideas?
    Best Regards,

  3. George Davis says

    Hi Saki,

    I purchased the plugin and I am running 5.1 on Architect. Can you send me the architect packager?


We will be happy to hear back from you

Please Login to post a comment