How do I change my textfield's emptyText field on the fly?

I've tried:

myTextField.emptyText = 'new empty text';

myTextField.emptyText = 'new empty text';
myTextField.applyEmptyText();

myTextField.emptyText = ['new empty text'];

myTextField.emptyText = ['new empty text'];
myTextField.applyEmptyText();

I realize that applyEmptyText() is not listed in the API docs but I thought I'd give it a shot as this worked in previous versions. I've also read that one needs to add the brackets too.

I've printed myTextField to the console and I see the emptyText property set to what I want but the field in the browser is not updating.

How do I change my textfield's emptyText field on the fly?

I've tried:

myTextField.emptyText = 'new empty text';

myTextField.emptyText = 'new empty text';
myTextField.applyEmptyText();

myTextField.emptyText = ['new empty text'];

myTextField.emptyText = ['new empty text'];
myTextField.applyEmptyText();

I realize that applyEmptyText() is not listed in the API docs but I thought I'd give it a shot as this worked in previous versions. I've also read that one needs to add the brackets too.

I've printed myTextField to the console and I see the emptyText property set to what I want but the field in the browser is not updating.

• javascript
• extjs4

4 Answers 4

I love ExtJS and all that it brings to the table but nuances like this (trying to get dynamically updated emptyText to work) really slow down development. None of the other SO posts on this issue have resolved the problem for me (emptyText just wouldn't update).

After several hours "fighting with my tools" and dozens of different permuations I came up with the following simple fix - just add a myTextField.reset(); to your code block.

myTextField.emptyText = 'new empty text';
myTextField.applyEmptyText();
myTextField.reset();

Hope this saved someone else some time.

Your first attempt should work as expected. However, as you can see in the source, there are certain criteria to be met before the placeholder is set. Your best bet is to place a breakpoint in the applyEmptyText function and debug it.

applyEmptyText : function(){
    var me = this,
        emptyText = me.emptyText,
        isEmpty;

    if (me.rendered && emptyText) {
        isEmpty = me.getRawValue().length < 1 && !me.hasFocus;

        if (Ext.supports.Placeholder) {
            me.inputEl.dom.placeholder = emptyText;
        } else if (isEmpty) {
            me.setRawValue(emptyText);
            me.valueContainsPlaceholder = true;
        }

        //all browsers need this because of a styling issue with chrome + placeholders.
        //the text isnt vertically aligned when empty (and using the placeholder)
        if (isEmpty) {
            me.inputEl.addCls(me.emptyCls);
        }

        me.autoSize();
    }
}

Through debugging it seems like the Text.inputEl.dom.placeholder property was not being set during my event in time to update the field. Based on the reset source above, I found that just setting the Text.inputEl.dom.placeholder in my code worked.

This applyEmptyText method is definately buggy!!

Look at the code, and imagine you want to set a zero as emptyText....

Look at the if conditions:

if (me.rendered && emptyText)

when emptyText = 0 , in the condition it will be as a false interpretated..... it's then with this code impossible to set the zero as emptyText!!!!