[SOLVED] Extended form in window => Shadow problem

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!

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

---

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?

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'
            }
        ]

---

Quote:

---

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

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

---

Great override!
FYI: works in 3.0, too.

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?

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

---