PDA

View Full Version : [CLOSED] Problem with Form.getValues() after removing a form field.



herring80
15 Aug 2011, 12:01 PM
I'm experiencing an issue with ExtJS version 4 (using ext-all-debug-w-comments.js) forms. Specifically, this issue has to do with the getValues() method of Ext.form.Panel. In this component I am adding dynamic textfields for filtering purposes. I use the getValues() method to get all values from the dynamic form and then serialize them to be sent to the backend c#.net application to be processed as JSON data and deserialized there as .net objects.

When I run the filter as it is, and don't remove a field from the filter, the application sends the correct information back to the server, however; When I remove (I've tried .remove and .destroy) the component, and run the .getValues() again, the removed field still shows up in the JSON string. This is all before the information is even sent back to the server. Am I missing something in the documentation by which I can turn off extjs caching? Or do I need to call an update function on the form or something like that to refresh the data that getValues() pulls its information from?

Please help!
Thanks,
Jason

evant
25 Aug 2011, 7:42 PM
Can we see a test case?



Ext.onReady(function() {

var form = Ext.create('Ext.form.Panel', {
renderTo: document.body,
width: 400,
height: 400,
defaultType: 'textfield',
items: [{
name: 'a'
}, {
name: 'b'
}],
buttons: [{
text: 'Log',
handler: function(){
console.log(form.getForm().getValues());
}
}, {
text: 'Remove',
handler: function(){
form.remove(1);
}
}]
});

});

Dr. Flink
28 May 2012, 8:22 AM
I'm experiencing the same problem with version 4.1.0.
I use removeAll(true) on a container holding dynamically generated comboboxes. When I using AJAX to submit the form values, using getValues() as params, the destroyed combo values still exist.

Dr. Flink
29 May 2012, 2:00 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.1.0
Browser versions tested against:

Chrome 19 (Windows)
DOCTYPE tested against:

quirksmode
Description:

Destroyed containers field(s) values still exist when calling form.getValues().
Steps to reproduce the problem:

Create a form and append one or more containers with textfield and button to remove the parent container.
Destroy the container (clicking the button).
Call form.getValues().
The result that was expected:

The destroyed container fields should not be returned as form values (destroying the container should also destroy its children.
The result that occurs instead:

The destroyed containers subfield values is returned.
Test Case:

Ext.onReady(function() {
var form = Ext.create('Ext.form.Panel', {
renderTo: document.body,
width: 400,
height: 400,
items: [{
xtype: 'fieldset',
items: []
}],
buttons: [
{
text: 'Add',
handler: function(btn) {
var fieldset = btn.up('form').down('fieldset');
var container = Ext.create('Ext.Container', {
layout: 'hbox',
margin: '0 0 10 0',
defaults: {
flex: 5,
hideLabel: true,
disabled: true
}
});
var combo = Ext.create('Ext.form.field.Text', {
name: 'a',
value: 'foo'
});
var button = Ext.create('Ext.button.Button', {
text: 'Remove',
flex: 1,
minWidth: 22,
handler: function(btn) {
var container = btn.up();
container.destroy();
}
});

fieldset.add(container);
container.add(combo);
container.add(button);
}
},
{
text: 'Log',
handler: function(){
console.log(form.getValues());
}
}
]
});
});


HELPFUL INFORMATION

Screenshot:
35690
Possible fix:

You can call container.removeAll() before calling container.destroy().
Additional CSS used:

only default ext-all.css
Operating System:

Win7

evant
29 May 2012, 2:09 AM
Thanks for the test case, that looks like a dupe of an issue we're already tracking: http://www.sencha.com/forum/showthread.php?203814