Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Munich
    Posts
    30
    Vote Rating
    0
    sigaref is on a distinguished road

      0  

    Question [SOLVED] Extended form in window => Shadow problem

    [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!
    Attached Images
    Last edited by sigaref; 28 Nov 2007 at 2:44 AM. Reason: Problem solved

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2007
    Location
    Munich
    Posts
    30
    Vote Rating
    0
    sigaref is on a distinguished road

      0  

    Default


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

  3. #3
    Ext User djbokka's Avatar
    Join Date
    Oct 2008
    Location
    Denver, Colorado, USA
    Posts
    11
    Vote Rating
    0
    djbokka is on a distinguished road

      0  

    Default


    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?

  4. #4
    Ext User
    Join Date
    Feb 2009
    Posts
    1
    Vote Rating
    0
    mito is on a distinguished road

      0  

    Default other solution

    other solution


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

  5. #5
    Ext User
    Join Date
    Jan 2009
    Posts
    3
    Vote Rating
    0
    MarcusGarvey'sGhost is on a distinguished road

      0  

    Default


    Quote Originally Posted by mito View Post
    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

  6. #6
    Ext User
    Join Date
    Mar 2008
    Posts
    15
    Vote Rating
    0
    mattpi is on a distinguished road

      0  

    Default


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

  7. #7
    Ext GWT Premium Member
    Join Date
    Jan 2009
    Location
    Colorado Springs, CO
    Posts
    363
    Vote Rating
    5
    DavidHoffer is on a distinguished road

      0  

    Question


    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?

  8. #8
    Sencha User Iveco's Avatar
    Join Date
    Aug 2007
    Location
    Germany
    Posts
    70
    Vote Rating
    1
    Iveco is on a distinguished road

      0  

    Default


    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;
        }    
    }
    German EXT-User and -Lover :-).