[2.2][CLOSED] AfterRender breaks Ext.form.Field value functionality [Archive]

tsa

11 Aug 2008, 12:51 PM

Hi, all,

After upgrading to Ext 2.2 I found that overriding Ext.form.Field with a custom afterRender function keeps all the fields blank despite my specifying a value in its config. I confirmed that this was working in Ext 2.1.

Here's a very simple example:

<html>
<head>
<title>Test EXT</title>
<script charset="ISO-8859-1" type="text/javascript" src="js/Ext2/adapter/ext/ext-base.js"></script>
<script charset="ISO-8859-1" type="text/javascript" src="js/Ext2/ext-all-debug.js"></script>
<script charset="ISO-8859-1" type="text/javascript">
Ext.override(Ext.form.Field, {
afterRender : function() {
Ext.form.Field.superclass.afterRender.call(this);
} });

// Putting it all together...
var theViewport = null;

Ext.onReady(function() {
theViewport = new Ext.Panel({
layout:'fit',
renderTo: 'main',
items:[
new Ext.form.FormPanel(
{items: [new Ext.form.TextField(
{name: 'test1',
fieldLabel: 'Test 1',
value: 'test'
})]
})
]});
});
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>

The above will render a simple text field with no value in it. If you comment out or remove the override code it will work as expected.

tsa

11 Aug 2008, 12:55 PM

Quick update/workaround:

<html>
<head>
<title>Test EXT</title>
<script charset="ISO-8859-1" type="text/javascript" src="js/Ext2/adapter/ext/ext-base.js"></script>
<script charset="ISO-8859-1" type="text/javascript" src="js/Ext2/ext-all-debug.js"></script>
<script charset="ISO-8859-1" type="text/javascript">
Ext.override(Ext.form.Field, {
afterRender : function() {
Ext.form.Field.superclass.afterRender.call(this);
this.setValue(this.value);
} });

// Putting it all together...
var theViewport = null;

Ext.onReady(function() {
theViewport = new Ext.Panel({
layout:'fit',
renderTo: 'main',
items:[
new Ext.form.FormPanel(
{items: [new Ext.form.TextField(
{name: 'test1',
fieldLabel: 'Test 1',
value: 'test'
})]
})
]});
});
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>

will work as expected.

brian.moeskau

11 Aug 2008, 12:57 PM

So you are replacing this:

afterRender : function(){
Ext.form.Field.superclass.afterRender.call(this);
this.initEvents();
this.initValue();
},

with this:

afterRender : function(){
Ext.form.Field.superclass.afterRender.call(this);
},

And you are wondering why the value isn't getting set? If you are overriding the function, then it's up to you to preserve or adequately replace the code your are overriding.

brian.moeskau

11 Aug 2008, 12:58 PM

By the way, nothing changed with afterRender in 2.2.

tsa

11 Aug 2008, 1:07 PM

Hmm... it definitely worked in 2.1... the code's been active without initValue(); (my non-example code does have initEvents()) and has been working until I upgraded to 2.2.

I did add the initValue(); and everything works, so thanks for the help.

I was under the impression afterRender was an empty user function for the field and it used its own internal afterRender function.

brian.moeskau

11 Aug 2008, 1:24 PM

Ah yeah, sorry -- it was an early 2.2 change made back in May. I thought it had been in 2.1. Anyway, afterRender is considered to be like a protected method, but it does have a default implementation (as with most of our protected methods like that). So yes, if you were overriding it before, you'll have to add the initValue call to your override. This was moved in order to fix the bug that previously, if you set an invalid value into a field prior to rendering, it would cause a runtime error.