1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Christian Mueller is on a distinguished road

      0  

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

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


    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.

    Code:
                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.

    Code:
                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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Christian Mueller is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Christian Mueller is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Christian Mueller is on a distinguished road

      0  

    Default


    Hi Animal,

    thanks for the simple solution. It works.

    Christian

  8. #8
    Sencha User
    Join Date
    May 2008
    Posts
    70
    Vote Rating
    0
    pdchapin is on a distinguished road

      0  

    Default Reinitialize

    Reinitialize


    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.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Call reset?

  10. #10
    Sencha User
    Join Date
    May 2008
    Posts
    70
    Vote Rating
    0
    pdchapin is on a distinguished road

      0  

    Default


    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.