Hybrid View

  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default Field help text plugin.

    Field help text plugin.


    A very simple plugin inspired by http://extjs.com/forum/showthread.php?t=33162

    It appends a help message above or below a Field.

    eg:



    Code:
    Ext.ux.FieldHelp = Ext.extend(Object, (function(){
        function syncInputSize(w, h) {
            this.el.setSize(w, h);
        }
    
        function afterFieldRender() {
            if (!this.wrap) {
                this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
                this.positionEl = this.resizeEl = this.wrap;
                this.actionMode = 'wrap';
                this.onResize = this.onResize.createSequence(syncInputSize);
            }
            this.wrap[this.helpAlign == 'top' ? 'insertFirst' : 'createChild']({
                cls: 'x-form-helptext',
                html: this.helpText
            });
        }
    
        return {
            constructor: function(t, align) {
                this.helpText = t;
                this.align = align;
            },
        
            init: function(f) {
                f.helpAlign = this.align;
                f.helpText = this.helpText;
                f.afterRender = f.afterRender.createSequence(afterFieldRender);
            }
        };
    })());
    CSS:
    Code:
    .x-form-helptext {
        font-size: 9px;
        color: #888;
    }

  2. #2
    Ext Premium Member
    Join Date
    Apr 2009
    Posts
    72
    Vote Rating
    0
    MH61 is on a distinguished road

      0  

    Default


    How do i apply this to a text box, do i have to create a FieldHelp object and then add it to my textfield, or is there a property i can set on my textfield (i tried both fieldHelp and helptext as properties)

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    It's a plugin. You use it in the standard way plugins are used: In the plugins config.

    Code:
        plugins: [ new Ext.ux.FieldHelp('Some help text') ],

  4. #4
    Ext Premium Member
    Join Date
    Apr 2009
    Posts
    72
    Vote Rating
    0
    MH61 is on a distinguished road

      0  

    Default


    Thanks, I guess i don't know the difference between an extension and a plugin.
    It looks nice - just what I was looking for

  5. #5
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Nige!! this should be in the framework.

    MH61, an "extension" extends an Ext JS class.

    a "Plugin" generally extends Object (or observable in some cases) and is utilized by an Ext JS class. I'm going to be adding a chapter dedicated to extensions and plugins in Ext JS in Action

  6. #6
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Hi,

    Is not the same effect that??:

    PHP Code:
    Ext.form.Field.prototype.msgTarget 'under'
    Greetings,

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Give your x-form-helptext class a padding-left enough to clear your icon, and a non-repeating background-image of your choice.

  8. #8
    Sencha User
    Join Date
    Nov 2008
    Location
    Currently Mexico
    Posts
    133
    Vote Rating
    0
    jmariani is on a distinguished road

      0  

    Default


    Thank you very much for your prompt response. I'll give it a try and report back.

  9. #9
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134
    Vote Rating
    4
    demon222 is on a distinguished road

      0  

    Default


    and image help text ;-)

    Code:
    Ext.ux.FieldHelp = Ext.extend(Object, (function(){
    
        function afterFieldRender() {
    			if (this.helpText) {
    				if (this.getEl().up('div.x-form-item')) {
    					var helpImage = this.getEl().up('div.x-form-item').child('label').createChild({
    						tag: 'img',
    						src: '../media/ico/help.png',
    						style: 'margin-bottom:0px; margin-left:5px; padding:0px;'
    					});
    					Ext.QuickTips.register({
    						target: helpImage,
    						title: '',
    						text: this.helpText,
    						enabled: true
    					});
    				}
    			}
        }
    
        return {
            constructor: function(t) {
                this.helpText = t;
            },
            init: function(f) {
                f.helpText = this.helpText;
                f.afterRender = f.afterRender.createSequence(afterFieldRender);
            }
        };
    
    })());

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    You need to look at your source for ComboBox.js, and add an override based on http://www.extjs.com/forum/showthrea...489#post377489

    That fix is applied in SVN and will be available in 3.1.1