PDA

View Full Version : The right way to add tooltips to form fields



mx_starter
13 Aug 2014, 8:43 AM
Hello, don't know if it is discussed somewhere before, so i decided to ask for your suggestions.

Well, one of the things that irritates me a lot in the framework, is the lack of support for tooltips in the form field components.

To be honest, i can not get the logic for this - why there is a tooltip support in the buttons for example, and not for the form fields?

Sometimes, the field labels are just not enough for user to understand what a particular field is used for.
And the tooltips are great way to assist him without "eating" screen size.

So, i decided to overcome this problem for me the following way, which seems to work for now:
(creates a tooltip if the field is configured with a 'toolTipText' config option)


Ext.override(Ext.form.field.Base,
{
initComponent: function()
{
var me = this;
if ( !Ext.isEmpty(me.toolTipText) )
{
me.on({
render: function() { me.createTooltip(); }
});
}
me.callParent(arguments);
},

createTooltip: function()
{
var me = this;
var tip = Ext.create('Ext.tip.ToolTip',
{
target: me.getEl(),
html: me.toolTipText,
trackMouse: true,
defaultAlign: 'bl-bl'
});
}

}
);


And now i want to see your comments/suggestions for the pros and cons of the above approach.
Is it safe? Is it the right way to do this kind of override?

israelroldan
15 Aug 2014, 5:57 AM
This is precisely why delegation exists in tooltips. Check this example: https://fiddle.sencha.com/#fiddle/8vk

And, regarding your question on overrides... we have a great entry in our Monthly support tips column on Sencha's blog about this: http://www.sencha.com/blog/top-support-tips-august-2014

mx_starter
15 Aug 2014, 7:13 AM
This is precisely why delegation exists in tooltips. Check this example: https://fiddle.sencha.com/#fiddle/8vk

And, regarding your question on overrides... we have a great entry in our Monthly support tips column on Sencha's blog about this: http://www.sencha.com/blog/top-support-tips-august-2014


Well Mr. Roldan,
thanks for your attention.

Just checked the fiddle, and its a neat way to implement the tooltips (but it is not working with the 4.x branch - at least in the fiddle).

For what i understand, this approach have the following advantages over that i took:
1. It eliminates the need for the override at all (which is always good)
2. If i have a form with 10 fields, then my approach will generate 10 Ext.tip.ToolTip instances (is that correct?), while yours will create only one.

I think Sencha could explain this tooltip suggestion together with the fiddle in a future blog post.
Will be useful.

Now for the override - if you mean the "Overhaul your Overrides by Greg Barry" article, it actually provoked me to make my override and after that - to ask my question here in the forum.

The problem is that i was unable to understand it very well.
Particularly, i failed to get why to use Ext.define() with an 'override' config option instead of Ext.override() and how this Ext.define will solve my intention (to have a tooltip for every form field which inherits from Ext.form.field.Base).

If you have to solve this problem using an override, could you please post some example code?
Thanks :)

israelroldan
15 Aug 2014, 7:58 AM
Oh, my bad! I oversaw the fact that you were looking for a 4.x approach. It didn't work because I was using the component property of Ext.dom.Element which is not available until 5.x.

I've updated it to work with 4.x: https://fiddle.sencha.com/#fiddle/8vk

Both of your findings are accurate, especially the second since it reduces memory-leak-prone code.

The delegation is explained in the docs (http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.tip.ToolTip). Hopefully we can include it in a blog post, that's a great idea! :)

Ext.override is a syntax that we try to deprecate since it is prone to errors if the class you pass as first argument is not defined. For instance, this will fail if Ext.form.field.Base is not yet loaded:


Ext.override(Ext.form.field.Base,{
initComponent: function () {
// some code
this.callParent(arguments);
}
});

When using the suggested syntax (Ext.define with the 'override' config) the override will be applied only after the overridden class is defined:


Ext.define('SomeClassName',{
override: 'Ext.form.field.Base',
initComponent: function () {
// some code
this.callParent(arguments);
}
});

When using this syntax, you don't need to perform any other changes in your app, since the overridden configurations or methods will be applied to the original class. In this example, 'SomeClassName' won't need to be used directly and it can be any name (mostly for your own reference, i.e: I'd personally use 'Ext.override.form.field.Base' instead of 'SomeClassName' in this example).

mx_starter
15 Aug 2014, 8:24 AM
When using the suggested syntax (Ext.define with the 'override' config) the override will be applied only after the overridden class is defined:


Ext.define('SomeClassName',{
override: 'Ext.form.field.Base',
initComponent: function () {
// some code
this.callParent(arguments);
}
});

When using this syntax, you don't need to perform any other changes in your app, since the overridden configurations or methods will be applied to the original class. In this example, 'SomeClassName' won't need to be used directly and it can be any name (mostly for your own reference, i.e: I'd personally use 'Ext.override.form.field.Base' instead of 'SomeClassName' in this example).

That's the answer i was waiting for - and especially the paragraph after the code snipped.
That 'SomeClassName' part was not clear to me and i was thinking i MUST use it which means i have to change more than 100 field definitions!!!
Which lead me to the question "Why not to use Ext.define with the 'extend' config option" and what is the difference after all!

And you just told me that Ext.define('xyz', override) will CHANGE the original class directly. That cleared things out and also cleared the blog post misunderstandings.

Well - now look at the docs for Ext.define().
If i was to maintain it - i will include your last paragraph explanation within as a right way example for how to make overrides.
You will agree that more clarification is needed about where is the difference when using Ext.define() with extend and override configs.

Thanks for your help!