[Solved]FormPanel.getForm().setValues not work?

[Christian Mueller]

Hello list,

I have a problem with my FormPanel, that do not display the provided record data.

For demonstration, I provide two simple samples. The first sample works correct. Correct means, the data, set in the setValues() method, is display in the form fields.

            Ext.onReady(function(){
                var formPanel = new Ext.form.FormPanel({
                  //region: 'center',
                  labelWidth:   120,
                  url:          '/locations',
                  frame:         true,
                  title:         'Sample1',
                  bodyStyle:     'padding:5px 5px 0',
                  width:         500,
                  defaults:      { width: 400 },
                  defaultType:   'textfield',
                    renderTo: Ext.getBody(),
                  items: [
                    { xtype: 'textfield', fieldLabel: 'Name', name: 'name'},
                    { xtype: 'textfield', fieldLabel: 'Strasse', name: 'street'}
                  ],
                  buttons: [ 
                    {
                      text: 'Back',
                      handler: function(){
                        panel.suspendEvents();
                        window.location.href = '/locations';
                      }
                    }
                  ]
                });
                formPanel.getForm().setValues({ id: 1, name: 'Test', street: 'Zeil' });
            });

In the second sample, the FormPanel is inserted in a Viewport (because i need the BorderLayout) and the record data was not displayd in the form.

            Ext.onReady(function(){
                var formPanel = new Ext.form.FormPanel({
                  region: 'center',
                  labelWidth:   120,
                  url:          '/locations',
                  frame:         true,
                  title:         'Sample1',
                  bodyStyle:     'padding:5px 5px 0',
                  width:         500,
                  defaults:      { width: 400 },
                  defaultType:   'textfield',
                    //renderTo: Ext.getBody(),
                  items: [
                    { xtype: 'textfield', fieldLabel: 'Name', name: 'name'},
                    { xtype: 'textfield', fieldLabel: 'Strasse', name: 'street'}
                  ],
                  buttons: [ 
                    {
                      text: 'Back',
                      handler: function(){
                        panel.suspendEvents();
                        window.location.href = '/locations';
                      }
                    }
                  ]//,
                    //listeners: { 'render', function(panel) {
                    //        panel.getForm().setValues({ id: 1, name: 'Test', street: 'Zeil' })
                    //    }
                    //}
                });
                formPanel.getForm().setValues({ id: 1, name: 'Test', street: 'Zeil' });
                
                var viewport = new Ext.Viewport({
                    layout: 'border',
                    items:[formPanel]
                });
            });

Any idee, what goes wrong?
Is 'formPanel.getForm().setValues()' the recommendation?

Thanks for help,
Christian

[Animal]

I think it needs to be rendered. Move the code to after it is rendered.

[Christian Mueller]

Hi Animal,

thanks for your hint. It works!
I moved 'formPanel.getForm().setValues({ id: 1, name: 'Test', street: 'Zeil' });' after the definition of the Viewport.

Thanks,
Christian

[Animal]

I assume you are just testing though, because the correct way to initialize a form from known values is by using the value config options of the fields.

[Christian Mueller]

Yes, it was for testing, but what is your recommendation, if you must fill a form with x fields?
Calling 'formPanel.getForm().findField('name').setValue('Mueller')' for every field?

A frend recommend me to use 'formPanel.getForm().load()' or register a listener for the render event. What do you meen?

Thanks,
Christian

[Animal]

If you are serving up a "filled" form like the old way of having web pages before forms could load themselves by Ajax, then use the value config of the fields to pre fill them with a value.

[Christian Mueller]

Hi Animal,

thanks for the simple solution. It works.

Christian

[pdchapin]

But what if I just want to reset a form to the way it was before it was submitted, i.e., I want the user to be able to submit the form (which includes a file upload) multiple times.

I've tried just using setValue to reset the individual fields back to blank, and the form looks correct, but the upload doesn't work. If I try just having the user overwrite the values from the previous submission, it appears that nothing is being passed.

At the moment I'm thinking about destroying the form and recreating it but that seems overkill. I can't believe this isn't a common thing that a lot of people would want to do.

[Animal]

Call reset?

[pdchapin]

I can use reset to clear the form, but the file upload doesn't work afterwards.

I tried destroying and are rebuilding the form and got the same result; the form was blanked but the subsequent uploads failed.

To be precise, the upload reported success, but the server side script can't find the uploaded file. Is there something I have to kick if I want to upload multiple files?

If this should be working, let me strip the code down to the bare minimum needed to created the problem and I can give people something to look at. At the moment this is embedded in a pretty large program and working through the unrelated code is more that I'd ask anybody to do.