1. #1
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default FormPanel - How to submit data?

    FormPanel - How to submit data?


    Hi guys,
    I already start to develope with this amazing framework building an application for my iPad, but I face a problem:
    "How to submit a form wrapped inside a FormPanel?". Using ext, that was simple:

    PHP Code:
    if(myForm.getForm().isValid()){
        
    myForm.getForm().submit({
            
    urlmyUrl,
            
    params: {
                
    action'test'
            
    },
            
    waitMsgmsgSending,
            
    success: function(formaction){
                 ...
            }
        });

    But how can I do the same with sencha-touch-beta-0.90?
    I don't find a way to do it even reading the sencha api.
    To be honest, reading the example in the package, you suggest me to use an Ajax.Request but I would like to use the built in form actions.

    Please Help,
    Thanks
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Hey Andrea,

    We will provide more examples and tutorials on this topic. The best way to currently achieve this right now is to call getValues() on the FormPanel or to listen for the 'submit' event on formpanel (which gets passed the formpanel and all the values), then put the values inside a new record. Add the record to a store and call sync() on the store to automatically sync to your server (or localstorage if you set up a localstorageproxy).

    Code:
    // create a new record from the given values
    var record = Ext.ModelMgr.create(form.getValues(), 'Action');
                
    //insert the new record into the store, and sync it with local storage
    store.add(record);
    store.sync();
    Please check the API docs for the Data package and FormPanel for more information.

  3. #3
    Sencha User sjonnet19's Avatar
    Join Date
    Oct 2007
    Posts
    12
    Vote Rating
    0
    sjonnet19 is on a distinguished road

      0  

    Default


    Tommy,

    Is this the new preferred method? I like it is I am working with a data store but that is not always the case. Does this mean the in ExtJS 4 and or Sencha Touch we will no longer be able to set the url, succes and failure functions and call form.submit? I am not looking for exact data to model to form storage on the client... This is a mobile application and should only show a summary of the data...

    Can you provide me any insight in how I should prepare to do this?

    Quote Originally Posted by TommyMaintz View Post
    Hey Andrea,

    We will provide more examples and tutorials on this topic. The best way to currently achieve this right now is to call getValues() on the FormPanel or to listen for the 'submit' event on formpanel (which gets passed the formpanel and all the values), then put the values inside a new record. Add the record to a store and call sync() on the store to automatically sync to your server (or localstorage if you set up a localstorageproxy).

    Code:
    // create a new record from the given values
    var record = Ext.ModelMgr.create(form.getValues(), 'Action');
                
    //insert the new record into the store, and sync it with local storage
    store.add(record);
    store.sync();
    Please check the API docs for the Data package and FormPanel for more information.

  4. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi Tommy, thanks for your reply.
    To be honest i dont't really like the solution to add a record to a store and sync with the server to be able to make a simple login. If this is the only solution, i prefer make a new Ext.Ajax.request to the server passing the form values as params.
    Isn't better? Tell me your opinion.
    By the way, it seems there's no Form.submit function in Sencha, any planning to implement it?It woul be really helpful.

    Thanks
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    We are definitely planning on adding more functionality to FormPanel and forms in general. For now you could make an Ext.Ajax.request and pass the formpanel.getValues(). There is nothing wrong with that solution.

  6. #6
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Why not just:

    Code:
    Ext.Ajax.request({
      url: 'myurl',
      params: form.getValues(),
     ...
    });
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  7. #7
    Sencha User sjonnet19's Avatar
    Join Date
    Oct 2007
    Posts
    12
    Vote Rating
    0
    sjonnet19 is on a distinguished road

      0  

    Default


    It's not but, it is weird since the form itself can handle this or at least most libraries do... action="myurl" ...

    Quote Originally Posted by edspencer View Post
    Why not just:

    Code:
    Ext.Ajax.request({
      url: 'myurl',
      params: form.getValues(),
     ...
    });

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Like I said in my previous post, we are planning on adding more functionality to FormPanels (including what you are asking for) in upcoming releases. For now you can do what Ed suggested. Remember this is still a beta product.

  9. #9
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Thank you Tommy and edspancer, i will do like you suggest. i know this is stil a beta product, but if I can say it, this is already a awesome product
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  10. #10
    Sencha User sjonnet19's Avatar
    Join Date
    Oct 2007
    Posts
    12
    Vote Rating
    0
    sjonnet19 is on a distinguished road

      0  

    Default


    I wanted to thank you guys for the insight...

    This library is shaping up to be pure awesomeness...

    I am trying to implement what you had suggested though I keep getting an error when I try to call: this.getValues()...

    TypeError: Result of expression 'this.getValues' [undefined] is not a function.

    He is a code snippet:

    Code:
    Company.LoginPanel = function(c){
        var cfg = Ext.apply({}, c, {
            fullscreen: true,
            items: [{
                xtype: 'fieldset',
                title: 'Login',
                defaults: {
                    required: true,
                    labelAlign: 'left'
                },
                items: [{
                    xtype: 'textfield',
                    name: 'login',
                    label: 'Login'
                }, {
                    xtype: 'passwordfield',
                    name: 'password',
                    label: 'Password'
                }]
            }, {
                xtype: 'button',
                text: 'Login',
                ui: 'action',
                handler: this.submit
            }]
        });
        Company.LoginPanel.superclass.constructor.call(this, cfg);
    };
    Ext.extend(Company.LoginPanel, Ext.form.FormPanel, {
        submit: function(){
            console.dir(this.getValues()); // This fails
            Ext.Ajax.request({
                method: 'post',
                params: this.getValues(),
                scope: this,
                success: function(r, o){
                    var obj = Ext.decode(r.responseText);
                    console.dir(obj);
                    if (obj.success === 'true') {
                        // Do something...
                    }
                    else {
                       // Do something else...
                    }
                    
                },
                url: '/login',
            });
        }
    });
    Ext.reg('loginpanel', Company.LoginPanel);
    Thanks in advance for any help...

    Quote Originally Posted by andreacammarata View Post
    Thank you Tommy and edspancer, i will do like you suggest. i know this is stil a beta product, but if I can say it, this is already a awesome product

Similar Threads

  1. Submit FormPanel via Enter-Key -> fireEvent of Submit-Button
    By Realnub in forum Ext 3.x: Help & Discussion
    Replies: 10
    Last Post: 13 Jan 2010, 3:36 AM
  2. formpanel.getform().submit() doesnot pass any data
    By pegasus in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 11 Nov 2009, 3:13 PM
  3. FormPanel's getForm.Submit doesn't pickup data in combos
    By mjcbrown in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 5 Oct 2009, 5:57 AM
  4. get back some data on submit success function of a formPanel
    By fustaman in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 22 Dec 2008, 12:13 PM
  5. Replies: 1
    Last Post: 25 Aug 2008, 7:57 AM

Thread Participants: 7