1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    1
    Vote Rating
    0
    michaelm is on a distinguished road

      0  

    Default Information Icons with tooltips on Form fields

    Information Icons with tooltips on Form fields


    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.


    Code:
    /**
       * 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.

    Code:
    /** 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;
    }
    Attached Images

  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


    Another solution is mentioned in this thread: link

  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    PaloAlto is on a distinguished road

      0  

    Default


    Thanks for sharing this, it looks interesting.

  4. #4
    Ext User
    Join Date
    Mar 2010
    Posts
    1
    Vote Rating
    0
    burncd is on a distinguished road

      0  

    Default Solution for EXT-GWT (Java)

    Solution for EXT-GWT (Java)


    Hello.

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

    Regards,
    Burncd

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar