PDA

View Full Version : Information Icons with tooltips on Form fields



michaelm
23 Oct 2007, 12:19 AM
Hi all

Wrote this Ext.form.Form extension to add information or help icons next to all your Form
fields. Maybe someone might find it usefull.



/**
* Overrides the default Ext.form.Form component to add information or help icons
* with supplied information description as a tooltip for those icons, next to all the form components.
*
* @summary Two parameters are required to use this Ext Form extension. The first is a 'descriptionTitle'
* which will replace the original fieldLabel property. The second is a 'description' which
* represents the tooltip text that will be displayed upon a hover over the info icon.<b>
* @published 23 October 2007
* @version 0.1
*/

// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');

var imgPath = "images/icons/";

Ext.ux.FormWithInfoTip = function(config) {

// call the parent constructor
Ext.ux.FormWithInfoTip.superclass.constructor.call(this, config);

};

// f.descriptionname

Ext.extend(Ext.ux.FormWithInfoTip, Ext.form.Form, {
});

Ext.override(Ext.form.Form, {

render : function(ct) {

ct = Ext.get(ct);
var o = this.autoCreate || {
tag: 'form',
method : this.method || 'POST',
id : this.id || Ext.id()
};
this.initEl(ct.createChild(o));

this.root.render(this.el);

this.items.each(function(f){
f.render('x-form-el-'+f.id);

// if an information description is supplied
// if (ct.description) {

Ext.DomHelper.insertBefore('x-form-el-'+f.id,
'<div>'
+ '<table style="width:100%"><tbody><tr>'
+ '<td class="x-desc-title">'+f.descriptionTitle+'</td>'
+ '<td style="float:right"><div id=ux-form-info-'+f.id+' class="x-information x-icon-combo-icon"></div></td>'
+ '</tr></tbody></table>'
+ '</div>');

Ext.QuickTips.init();

Ext.QuickTips.register({
target: Ext.get('ux-form-info-'+f.id),
trackMouse: true,
text: f.description
});

Ext.QuickTips.enable();
// }

});

if(this.buttons.length > 0){
// tables are required to maintain order and for correct IE layout
var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
cls:"x-form-btns x-form-btns-"+this.buttonAlign,
html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
}}, null, true);
var tr = tb.getElementsByTagName('tr')[0];
for(var i = 0, len = this.buttons.length; i < len; i++) {
var b = this.buttons[i];
var td = document.createElement('td');
td.className = 'x-form-btn-td';
b.render(tr.appendChild(td));
}
}
if(this.monitorValid){ // initialize after render
this.startMonitoring();
}
return this;

}

});


And the corresponding CSS stylesheet.


/** Used by the icon information form. **/

.x-help{
background-image: url(/images/icons/help.png);
}

.x-information{
background-image: url(/images/icons/information.png); /** /icons/information.png OR /iconInformation.gif**/
}

.x-icon-combo-icon {
background-repeat: no-repeat;
background-position: 0 50%;
width: 18px;
height: 14px;
float: right;
}

.x-icon-combo-input {
padding-left: 26px;
}

.x-form-field-wrap .x-icon-combo-icon {
top: 3px;
left: 6px;
}

.x-desc-title{
font-family: tahoma,arial,helvetica,sans-serif;
font-size: 12px;
}

http://extjs.com/forum/attachment.php?attachmentid=2263&stc=1&d=1193127269

sigaref
28 Nov 2007, 2:06 AM
Another solution is mentioned in this thread: link (http://extjs.com/forum/showthread.php?t=19301)

PaloAlto
8 Dec 2007, 9:32 AM
Thanks for sharing this, it looks interesting.

burncd
17 Jun 2010, 12:42 PM
Hello.

I'm currently developing a form and is there any way we can do this in Java, and not JavaScript?

Regards,
Burncd