Hybrid View

  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      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,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      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
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    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,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      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
    126
    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,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      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

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