updateManager fails to update text box element...

[violinista]

Hello 2 all,

I tried updateManager today, for updating only one text field on the form (this is specific case, and could not be done via form.load()). The code:



frmTest.render(gridFoot);

txtBox1.el.load({
url:myUrl,
params:{txtBox:"txtBox1"}
});

... this myUrl with this parameter really returns a simple string - I checked it in fireBug, But element is not updated. Maybe to try with txtBox1.setValue(), but do not know how.

I tried also:



txtBox1.el.getUpdateManager().update({
url:myUrl,
params:{txtBox:"txtBox1"}
});


but, without luck. Does someone know the solution? thank you.

[liggett78]

You can define your own callback function in the UpdateManager.update() method call.

[Animal]

The default UpdateManager renderer uses innerHTML to put the returned string into the Element.

That won't work with input fields. You'll have to add your own renderer.

http://extjs.com/deploy/ext-1.1-beta1/docs/output/Ext.UpdateManager.html#setRenderer

But you should think about what you're doing updating a single element usnig an HTTP request!

[violinista]

Thank you! I did not noticed that. The final code is:


txtBox1.el.getUpdateManager().update({
url:myUrl,
params:{txtBox:"txtBox1"},
callback: function(a,b,c){
txtBox1.setValue(c.responseText);
}
});Regarding naming callback params, I don't know really which parameters are, so I tried via console.

Thanks!!


EDIT: This txtBox element is disabled, and does not submits ever-it only shows userName, which I get from serverSide login procedure.

10x!

[liggett78]

callback : Function
(optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)

See docs for UpdateManager.update().

[violinista]

Hmmm, that code fails in Internet Explorer 7. It throws:

Unknown runtime error.

I will investigate, and post results, if any.

[Animal]

Hello!!!!!

UpdateManager.update attempts to set the innerHTML of the element.

Just because you add a callback which will be fired after the update to do the right thing, doesn't mean that won't happen.

You need to set a renderer like I said.

Try adding this to your overrides files. It should make all Form Fields Ajax-updatable by supplying an UpdateManager with a corrected renderer:



Ext.override(Ext.form.Field, {
getUpdateManager: function() {
if (this.updateManager) {
return this.updateManager;
}
this.updateManager = getEl().getUpdateManager();
var formField = this;
this.updateManager.setRenderer({
render: function(el, response, um, cb) {
formField.setValue(response.responseText);
}
});
}
});

[violinista]

Thank you so much. I tried first to dynamically load this data via Ext.Ajax.request(...) but without success.

Here is some corrected code for overriding txtField updateManager, which works fine:



Ext.override(Ext.form.Field, {
getUpdateManager: function() {
if (this.updateManager) {
return this.updateManager;
}
this.updateManager = this.getEl().getUpdateManager();//corrected to "this.getEl()
var formField = this;
this.updateManager.setRenderer({
render: function(el, response, um, cb) {
formField.setValue(response.responseText);
}
});
return this.updateManager; //added this line
}
});



So you can simply now write:



txtBox1.getUpdateManager().update({
url:someUrl,
params:{txtBox:"txtBox1"}
});


...this works good in FF, but fails in IE7 (it throws: Unknown runtime error.)

Maybe to try with Ajax.request() or similar?

[Animal]

OK, well done on debugging and correcting my off the cuff ramblings.

The IE7 error, I don't know what it could be now. I'd recommend setting a breakpoint in that renderer and step into the setValue. You need the MS script debugger to do this though :(

You haven't got an older attempt at doing this hanging around in your code have you? I guess that trying to set innerHTML of an input element might throw some kind of error.

[violinista]

No, I do not have MS script debugger :(

...maybe to put some if(Ext.isIE && Ext.isIE7) {} solution in my code? :)

Unfortunately I do not have (and didn't have ever) solution for setting txtBox value in IE, this only works in FF.

I tried to remove renderer in your function, but again - it throws same error.

:(

[violinista]

I made partial universal solution for my situation. Code:



var con = new Ext.data.Connection().request({
url:myUrl,
params:{txtBox:"txtBox1"},
callback: function(opts,success,response) {
txtBox1.setValue(response.responseText);
}
});


... but, when I submit a form, I have to form.reset(), and my txtBox1 lose value :(

So, I have to set emptyText. Is there a way to set emptyText parameter in the form, after the form is rendered?

Thanks!

[tryanDLS]

You could set the property then call applyEmptyText. You might also have to wire the blur event yourself to remove it. Take a look at the source for TextField