javascript - ExtJS4 Change TextField emptyText on the Fly - Stack Overflow

admin管理员组

文章数量:1417070

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

Share Improve this question Follow asked Nov 19, 2013 at 2:43 Jason StrimpelJason Strimpel 15.5k2525 gold badges8181 silver badges109109 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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!!!!

本文标签： javascriptExtJS4 Change TextField emptyText on the FlyStack Overflow