PDA

View Full Version : Problem with getValue()



woozy
15 Feb 2011, 4:39 AM
Hello

I'm having a problem with getValue on form fields. I'm probably doing something wrong, but here it goes:

I have a tabpanel with 10 forms, I'm saving the values using a ajax.request (not form submit because I want to save the data in all forms in a single request). The problem is that getValue() returns the value of the form (loaded with setValue()) and not the modified value. Example:

when I load de form I do textfield.setValue('Jonh Smith');

Then in the form I change the name simply to Jonh.

when I hit the save button there is a textfield.getValue() that still returns 'Jonh Smith' instead of just John'

Any help is appreciated.

Regards
SÚrgio

khalilm
15 Feb 2011, 7:19 AM
Sergio,

I cannot comment directly on why your code doesnt work but perhaps try Ext.getCmp to get your value as in:

var yourVar = Ext.getCmp('textfield_id').getValue();

Khalil

darthwes
15 Feb 2011, 8:11 AM
As an aside, you can get a form's basic form and call getValues to acquire all the values at once...

Sounds like you might have an issue where you need to render the form before issuing setValue calls. Are you saying that the user changes a textfield on a form and then when you call getValue it's not returning the new value or is this like a combo box with force selection on? We'd need to see some code.

woozy
15 Feb 2011, 9:02 AM
Thank you both for the replying.

Darthwes: it's a textfield on the form. The user changes it and getValue() is not returning the new value.

As I've told before, I have tab panel with various forms inside. So I'm using cascade to get the values on all fields. here's some code (t is my tabpanel):


t.cascade(function(){
if (this.name != undefined) {
mobi.auxData[this.name] = this.getValue();
}
});

mobi.auxData it's a global object already defined.

Thanks

johnathanhebert
15 Feb 2011, 11:01 AM
EDIT: what does this.value return? Note, setValue will attempt to validate the form field if it is rendered... does it have any validation rules?

The getValue() method will return the value config option if it is not rendered... when you are calling setValue()... is the textfield rendered?

see code from Ext.form.Field:


getValue :function(){
if(!this.rendered){
returnthis.value;
}
var v =this.el.getValue();
if(v ===this.emptyText || v ===undefined){
v ='';
}
return v;
}

darthwes
15 Feb 2011, 11:09 AM
Could Not Replicate.

I have this code:

<script language="javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;
Ext.QuickTips.enable();

var tp = new Ext.TabPanel({
activeItem: 0,
deferredRender: true,
items: [{
xtype: 'form',
title: 'Panel 1',
items: [{
xtype: 'textfield',
fieldLabel: 'Description',
name: 'd1',
value: 'Dinosaurs'
}]
}, {
xtype: 'form',
title: 'Panel 2',
items: [{
xtype: 'textfield',
fieldLabel: 'Description 2',
name: 'd2',
value: 'Dinosaur Rex'
}]
}],
listeners: {
render: function() {
this.items.get(1).items.get(0).setValue("Russel Tarrier");
}
}
});

new Ext.Viewport({
layout: 'border',
id: 'myViewport',
items: [{
region: 'north',
html: '<h2 align=center>Hello</h2>',
height: 125
}, {
region: 'south',
height: 100,
buttons: [{
text: "Test",
handler: function() {
var myArr = {};

tp.cascade(function(arr) {
return function() {
if (Ext.isDefined(this.name)) {
arr[this.name] = this.getValue();
}
};
}(myArr));

console.log('myArr', myArr);
}
}]
}, {
region: 'center',
layout: 'fit',
items: [tp]
}]
});
});
</script>

No matter how I toggle values I can not find the problem you describe. If you want more help, I'll need to see more code (like what are we doing differently?). Sorry I couldn't be of more assistance.

woozy
16 Feb 2011, 9:49 AM
Been checking your suggestions:

The field is rendered else user could not change it.

this.value returns the same value that this.getValue()

Wes, can't post code because my form has more than 2000 lines. :) But thank you for your testing. I don't see big difference in your code and my code. This is really weird.

johnathanhebert
16 Feb 2011, 9:55 AM
Do you have any validation rules set for that field?

woozy
16 Feb 2011, 9:58 AM
No I haven't defined any validation rulles yet.

johnathanhebert
16 Feb 2011, 10:03 AM
Can you zip your code and attach?

johnathanhebert
16 Feb 2011, 10:06 AM
One of the best ways to see where it is losing the edited value is to put a breakpoint on the setValue() and getValue() methods in firebug... and when the breakpoint is hit, click on the Stack tab to look at the stack trace... and click up the stack a few methods and inspect variable values

woozy
16 Feb 2011, 3:24 PM
Thank you all. Finally got it.

I had another field in another tab with the same name. So, using the cascade I was getting the value on the other field that wasn't rendered yet.

Also, I got to the conclusion that I could not use cascade to retrieve the values in the fields, because it is assynchronous. So I used BasicForm getValues. BUT! I had to use it inside a try/catch block. I had to do this, as I was using deferredRender on the tabpanel and it's not guaranteed that all forms are rendered.

Here's some code that I hope can help other people:



var cI = t.items.getCount();
var i = 0;

for (i = 0; i < cI; i++) {
try {
var vals = t.items.get(i).items.get(0).getForm().getValues();
for (objN in vals) {
mobi.auxData[objN] = vals[objN]
}
} catch(e) {

}
}


As you can see I'm getting the number of items on the tabpanel. Then I use try/catch, because I want to try to retrieve all forms because the user can switch for example to the tab numer 8 and hit the save button (tabs 2 to 7 are not rendered and if you don't handle the exception only the fields of tab 1 would be retrieved).

In the for block I'm merging the values of all forms to a single object that I use later as params on an ajax request.

darthwes
16 Feb 2011, 7:02 PM
I like the getValue call, having played with the getValues long enough to have run into the problem you described (getValues uses the dom, which doesn't contain the elements yet). However, I would point out that you can do



Ext.applyIf(myFormValues, (whatever.getForm().getValues() || {}));


which does what you're doing except the "if" on the applyIf means it won't redefine a key that already exists. Similarly, if you're sure that's not going to happen, you can use Ext.apply. I like this better since it does it in one line and avoids replication of that function(/loop?)'s code.

Glad you solved it. Cheers.