PDA

View Full Version : [SOLVED] Extended form in window => Shadow problem



sigaref
27 Nov 2007, 9:33 AM
I have taken the form field extension code from someone on this forum for showing a small questionmark image with tooltip near the field label, the code is:


Ext.override(Ext.form.Field, {
afterRender : function() {
if(this.helpText){

var label = findLabel(this);

if(label)
{
var helpImage = label.createChild({
tag: 'img',
src: '/images/global/questionmark.gif',
style: 'margin-bottom: 0px; margin-left: 5px; padding: 0px;'
});

Ext.QuickTips.register({
target: helpImage,
title: '',
text: this.helpText,
enabled: true
});
}
}
Ext.form.Field.superclass.afterRender.call(this);
this.initEvents();
}
});

var findLabel = function(field) {

var wrapDiv = null;
var label = null

//find form-item and label
wrapDiv = field.getEl().up('div.x-form-item');
if(wrapDiv)
{
label = wrapDiv.child('label');
}
if(label) {
return label;
}
}

Now I build a form with fields with helpText config set, then I put the form into a window with:


FormMessageBox = function(element, options)
{
dlg = new Ext.Window({
autoCreate : true,
title: options.title,
draggable: true,
resizable: options.resizable ? options.resizable : false,
constrain:true,
constrainHeader:true,
minimizable : false,
maximizable : false,
modal: true,
shim:true,
buttonAlign:"center",
width:element.width || 400,
plain:true,
maskDisabled: false,
footer:true,
closable:true
});

this.window = dlg;
this.element = element;

this.window.add(element);

if (options.createButton)
{
this.window.addButton("Create", function(){ FormMessageBox.thisCallbackFunction(element, dlg, 0)});
}

if (options.updateButton)
{
this.window.addButton("Update", function(){ FormMessageBox.thisCallbackFunction(element, dlg, 1)});
}


if (options.okButton)
{
this.window.addButton("OK", function(){ FormMessageBox.thisCallbackFunction(element, dlg, 0)});
}

if (options.cancelButton)
{
this.window.addButton("Cancel", function(){ dlg.hide() } );
}


this.window.show();
}

FormMessageBox.thisCallbackFunction = function(element, window, isUpdate)
{
if (element && element.callback)
{
element.callback(element, window, isUpdate);
}
}


The window appears, but now the shadow is to high for the window. I have tried using syncShadow, syncSize, doLayout on the window on "render", but nothing works.

But: when I drag the window, the shadow gets recalculated and is correct "afterDrag".

Any ideas?

Thank you in advance for any help!

sigaref
28 Nov 2007, 2:01 AM
I have fixed the problem now, I had to specify the image width and height in the form extension. This fixed the high shadow.


var helpImage = label.createChild({
tag: 'img',
src: '/images/global/questionmark.gif',
style: 'margin-bottom: 0px; margin-left: 5px; padding: 0px;',
width: 10,
height: 11
});

djbokka
28 Oct 2008, 3:35 PM
As mentioned here (http://extjs.com/forum/showthread.php?t=11537) by Zyclops, using afterRender seems to break the combobox.

The code worked perfectly for inserted the info graphic and tooltip but the default values for my comboboxes disappeared.

Any workaround?

mito
26 Mar 2009, 4:06 AM
Form input parameter: helpText.

http://pezo.net/extjs/input_tooltip/


items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
helpText: 'Your first name here'
},{
fieldLabel: 'Last Name',
name: 'last',
helpText: 'Your last name here. If no type X'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email',
helpText: 'Please type here one valid email address'
}
]

MarcusGarvey'sGhost
28 Apr 2009, 3:02 AM
Form input parameter: helpText.

http://pezo.net/extjs/input_tooltip/


items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
helpText: 'Your first name here'
},{
fieldLabel: 'Last Name',
name: 'last',
helpText: 'Your last name here. If no type X'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email',
helpText: 'Please type here one valid email address'
}
]

Hi there,

I have tried using this override, and it works brilliantly, except that the config "value" is not been assigned anymore, it just ignores whatever value is assigned to it. Does anyone know why this might be? Thanks

mattpi
3 Jun 2009, 6:39 AM
Adding this line made the values come back for me:


this.initValue();

...just below this.initEvents() on line 22. I got the fix from Jack in this thread for a similar extension...

http://extjs.com/forum/showthread.php?t=11537&page=2

FYI, the full code is now:

Ext.override(Ext.form.Field, {
afterRender: function() {
if(this.helpText){
var label = findLabel(this);
if(label){
var helpImage = label.createChild({
tag: 'img',
src: 'information.png',
cls: 'info-tooltip',
style: 'margin-bottom: 0px; margin-left: 5px; padding: 0px;'
});
Ext.QuickTips.register({
target: helpImage,
title: '',
text: this.helpText,
enabled: true
});
}
}
Ext.form.Field.superclass.afterRender.call(this);
this.initEvents();
this.initValue();
}
});

var findLabel = function(field) {
var wrapDiv = null;
var label = null
wrapDiv = field.getEl().up('div.x-form-item');
if(wrapDiv) {
label = wrapDiv.child('label');
}
if(label) {
return label;
}
}

grgur
28 Jun 2009, 10:52 PM
Great override!
FYI: works in 3.0, too.

DavidHoffer
7 Apr 2010, 6:49 PM
I too need to have clickable help icon next to field's label, except I'm using GXT. Any pointers on how this can be done?

Iveco
22 May 2013, 1:54 AM
Fix for EXTJs 4.2.0
- form field DOM element name changes
- QuickTips registration changed




Ext.override(Ext.form.Field, {
afterRender: function() {
if(this.helpText){
var label = findLabel(this);
if(label){
var helpImage = label.createChild({
tag: 'img',
src: '../images/famicons/information.png',
cls: 'info-tooltip',
style: 'margin-bottom: 0px; margin-left: 5px; padding: 0px;',
'data-qtip': this.helpText
});
}
}
Ext.form.Field.superclass.afterRender.call(this);
this.initEvents();
this.initValue();
}
});

var findLabel = function(field) {
var wrapDiv = null;
var label = null
wrapDiv = field.getEl().select('label.x-form-item-label');
if(wrapDiv) {
label = wrapDiv.child('label');
}
if(label) {
return label;
}
}