Results 1 to 5 of 5

Thread: Field Help Text Plugin for ExtJS4

  1. #1
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527

    Default Field Help Text Plugin for ExtJS4

    Hello everyone!

    Since I find it very useful, I ported Animals Field HelpText plugin to ExtJS4.
    (see http://www.sencha.com/forum/showthread.php?77984)

    I want to share the code here.

    Code:
    /**
     * @class Ext.ux.form.plugin.FieldHelpText
     * @ptype fieldhelptext
     * Plugin to display a small help text below or above a form field.
     */
    Ext.define('Ext.ux.form.plugin.FieldHelpText', {
    	alias: 'plugin.fieldhelptext',
    
    	/**
    	 * @cfg {String} [cls='ux-form-fieldhelptext']
    	 * CSS Class to apply to the help text element.
    	 */
    	cls: 'ux-form-fieldhelptext',
    
    	/**
    	 * @cfg {String} [align='bottom']
    	 * Text position. Set to 'top' to display the help text above the field, 'bottom' for below.
    	 */
    	align: 'bottom',
    
    	/**
    	 * @cfg {String} text (required)
    	 * Help text to display.
    	 */
    
    	/**
    	 * @constructor
    	 * @param {Object/String} config Config object. If this param is a string, it is used as
    	 * help text. The default values of all other config options are used in this case.	 
    	 */
    	constructor: function(config)
    	{
    		if (Ext.isString(config))
    			config = {
    				text: config
    			};
    		Ext.apply(this, config);
    	},
    	/**
    	 * Plugin init function
    	 * @private
    	 */
    	init: function(field)
    	{
    		if (!field.isFieldLabelable)
    			Ext.Error.raise('FieldHelpText plugin has to be used on form fields that implement Ext.form.Labelable.');
    		
    		// only apply if text available
    		if (!Ext.isEmpty(this.text))
    		{
    			var markup = '<div class="' + (this.cls || '') + '">' + this.text + '</div>';
    			if (this.align == 'top')
    				field.beforeSubTpl = this.getSubTpl(field.beforeSubTpl || '', markup, '');
    			else
    				field.afterSubTpl = this.getSubTpl(field.afterSubTpl || '', '', markup);
    		}
    	},
    	/**
    	 * Prepare subTpl
    	 * @private
    	 */
    	getSubTpl: function(tpl, beforeMarkup, afterMarkup)
    	{
    		if (Ext.isString(tpl))
    			return beforeMarkup + tpl + afterMarkup;
    		else if (!tpl.isTemplate)
    			tpl = new Ext.XTemplate(tpl);
    		return tpl.set(beforeMarkup + tpl.html + afterMarkup, tpl.compiled);
    	}
    });
    SCSS/CSS:
    Code:
    .ux-form-fieldhelptext
    {
    	font-size: 9px;
    	color: #888888;
    }
    How to use:
    Code:
    Ext4.create('Ext.form.Panel', {
    	items: [{
    		xtype: 'textfield',
    		name: 'nodeTitle',
    		fieldLabel: 'Titel',
    		plugins: [{
    			ptype: 'fieldhelptext',
    			text: 'Titel der Seite. Wird im Menü angezeigt.'
    		}]
    	},{
    		xtype: 'textfield',
    		name: 'pageTitle',
    		fieldLabel: 'Seitenüberschrift',
    		plugins: [{
    			ptype: 'fieldhelptext',
    			text: 'Überschrift der Seite. Wird ggü. "Titel" bevorzugt als Überschrift über dem Seitenhinhalt verwendet.'
    		}]
    	}]
    });
    How it looks:
    screenshot_20120911.png
    Programming today is a race between software engineers striving to build bigger and better ?diot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409

    Default

    This will be of use .. thank you for sharing.

    Scott.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2007
    Location
    The Netherlands
    Posts
    53

    Default Thanks

    Very helpfull indeed!

  4. #4
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    211

    Default

    +1
    Vador

  5. #5

    Default

    Hello,

    I like this plugin, do you have a port in ExtJs 6 ?
    This doesn't work very well with the layout in ExtJs 6...

    Thanks in advance

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •