Ext Core: Display an info text in a HTML input field if its focus is lost

[marcus.schiesser]

You want to do that just by using the new Ext Core 3.0?
Then use the code from this post:
Display an info text in a HTML input field if its focus is lost

Have fun,

Marcus

[Joe]

I like the example on the page but had to use SVN to pull it down and then hunt down the .js file. A bit much for the avg person to want to go through to find the code.

Tip: If you can post the code, then you will more likely get responses and even code fixes.

On that note - after reading the code it seemed that if the field contained a value already, it would not function properly and sure enough - it didn't - here is a fix.
I also updated it so you can pass an element a dom or a string id field.

I normally wouldn't post your code here when you didn't in the first place, but in this case it is the best way for me to show you the fixes / enhancements - hope you don't mind.

/**
 * @author schiesser
 * 6-12-2009 - Bug fixes / enhancement by Joseph Francis
 */

Ext.ns('Extensive.behaviours');

Extensive.behaviours.setInfoText = function(element, infoText, infoClass){
    infoClass = infoClass || 'extensive-info-text';
    //--- updated to allow and element, dom or text id to be passed
    var element = element.dom ? element : Ext.get(element);
    //--- set value here using dom to assure it works when it has and does not have a value
    var value = element.dom.value;
    //--- updated to work properly in the event that the field initially contains a value
    if (element.dom.value === '' ){
	    element.dom.value = infoText;
	    element.addClass(infoClass);
    }    
    var onBlur = function(e){
        value = e.target.value;
        if (value === '') {
            e.target.value = infoText;
            Ext.fly(e.target).addClass(infoClass);
        }
    };
    
    var onFocus = function(e){
        Ext.fly(e.target).removeClass(infoClass);
        if (value === '') {
            e.target.value = '';
        }
    };
    element.on('focus', onFocus);
    element.on('blur', onBlur);
};

[marcus.schiesser]

Hi Joe,

thanks for the fix. Do you want to commit it to SVN? If so I would be glad to give you access. Just send me mail (e.g. at http://www.marcusschiesser.de/?page_id=54) with you e-mail.
About the code thing: I don't want to include too much code in my posts but next time I can at least include a link.

Thanks,

Marcus

[Joe]

Have you seen / used this?

http://www.extjs.com/forum/showthread.php?t=43450
I am setup as an author here and can help you do the same and/or post your ux controls here as well. This is a nice central place for common ux controls.

Thanks for your contributions - I sent you my contact info re SVN access.

[Joe]

Per our e-mails .. this code has been updated on your SVN at:http://code.google.com/p/extensive

Also it has been added to the ExtJS Core Open Source Content Controls library
http://code.google.com/p/extjscoremitux

Thanks!