Description
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
- Extract the downloaded zip file anywhere in your http server accessible folder
- Navigate to http://localhost/where-you-unzipped/saki-field-icon/docs
- Follow the instructions in the Getting Started Guide
Compatibility
The package contains two versions:
- ExtJS 4
- ExtJS 5
Author:
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.
Latest posts by saki (see all)
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
Hi Saki,
I purchased the plugin and I am running 5.1 on Architect. Can you send me the architect packager?
Regards.
George.
Hi Saki,
does this plugin works with ExtJS 6?
Regards,
Simon
Hi,
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,
Maciej
Ext suggested “clearListeners” seems to be working fine.
Btw, line 426 is missing a semicolon.
Thank you, Maciej, your fixes will be included in the next issue.
Best,
Saki
I have the same problem with the recently downloaded and paid extension – Isn’t there a fix and it is still sold?
Unfortunately not, this has been developed for Ext 4 and up.
Do you have a 3.x version?
Unfortunately not. Ext 3 is too old to support.
The plugin is not too complicated; you might back port it to 3 quite easily.
Best,
Saki
The ExtJS 4.2.x version doesn’t work if a field has labelAlign: ‘top’ and the plugin position is ‘afterInput’ 🙁
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).
Awesome, thanks! How can I get an updated version once you fixed it (I’ve bought the “1 developer” license)?
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.
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)
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
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.