I have what appears to be a simple question, but I'm pretty stumped at this point. I'm working on some Ext.JS based UI code and I want to change the value of some text inside a form field.

The field is an ext.js.TextField.

I have code like this:

var foo = this.getForm().findField('myFooField');
console.log(foo);
foo.setValue("text different that is different from the default");

If I run this code, "foo" is definitely getting logged to the console, and it's a correct object populated with the values that I'd expect. However, the call to setValue doesn't seem to do anything.

I've put some trace calls before and after setValue to make sure it really does run, and everything seems to be happening without issue. It's just that the UI is not reflecting my change. I've tried calling "setRawValue" as well, but no difference.

Any suggestions? Much appreciated!

I have what appears to be a simple question, but I'm pretty stumped at this point. I'm working on some Ext.JS based UI code and I want to change the value of some text inside a form field.

The field is an ext.js.TextField.

I have code like this:

var foo = this.getForm().findField('myFooField');
console.log(foo);
foo.setValue("text different that is different from the default");

If I run this code, "foo" is definitely getting logged to the console, and it's a correct object populated with the values that I'd expect. However, the call to setValue doesn't seem to do anything.

I've put some trace calls before and after setValue to make sure it really does run, and everything seems to be happening without issue. It's just that the UI is not reflecting my change. I've tried calling "setRawValue" as well, but no difference.

Any suggestions? Much appreciated!

• javascript
• extjs

• setValue() should work fine. Try getting a reference to the field as an Ext ponent to see if it makes a difference i.e. var foo = Ext.getCmp('myFooField'); – legendofawesomeness Commented Dec 17, 2011 at 0:05
• What is this on your first line? I'm trying to reproduce your code and getting .getForm() is undefined. – Nick Rolando Commented Dec 17, 2011 at 0:10
• Could you share the full code of your form? It looks like the issue is related to the code created as the reflection of setValue() is instantaneous and values gets populated in the textbox right away. Also, is there any error thrown? – netemp Commented Dec 19, 2011 at 9:03

3 Answers 3

If you are using MVC probably you are trying to change value on render event of a window, for textfields the set value works only on afterRender event.

Your code looks right however I normally use a function like this

Ext.override(Ext.Container, {
setValue: function(c, v) {this.findById(c).setValue(v);},
getValue: function(c) {return this.findById(c).getValue();}
}); 
win.setValue('myFooField', 'Some text');  

I am not sure why your code doesn't work. Check if the below code works.

Ext.getCmp('myFooField').setValue("text different that is different from the default");

Even if this isn't working, then probably you are having the code in wrong place.