[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:

Code:

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:

Code:

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.

Code:

  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/

Code:

  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

Originally Posted by mito

Form input parameter: helpText.

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

Code:

  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:

Code:

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:

Code:

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

Code:

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;
    }    
}

[SOLVED] Extended form in window => Shadow problem

Thread Tools

Search Thread

Display

[SOLVED] Extended form in window => Shadow problem

[SOLVED] Extended form in window => Shadow problem

other solution

other solution