1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    44
    Vote Rating
    0
    nathanblogs is on a distinguished road

      0  

    Default standardSubmit issue

    standardSubmit issue


    Hi,

    I currently have a formpanel which contains some fields that I use to search, the search results are then put into a gridpanel. I am now trying to add an export button, but since you can't get a csv export from a standard submit I am trying to create a hiden formpanel which I will fill with the search params and query the server. To do this I believe I need to use the standardSubmit options but I can get the examples to work eg: http://www.extjs.com/learn/Manual:Fo...standardSubmit .

    This is my code, it is a direct copy and paste from the example but I can't get it to submit and it just throws and error ( the error is listed at the bottom ).

    Code:
        var exportForm = new Ext.FormPanel({
            renderTo: document.body,
            labelAlign: "side",
            frame: true,
            autoHeight: true,
            waitMsgTarget: true,
            standardSubmit: true,
            baseParams: {
                id: 1
            },
            url: "myProcess.php",
            title: "My Form",
            items: [{
                title: "Name Fields",
                xtype: "fieldset",
                autoHeight: true,
                defaults: {
                    hideLabel: true,
                    labelSeparator: ""
                },
                items: {
                    xtype: "textfield",
                    name: "userName"
                }
            }],
            buttons: [{
                text: "Save",
                id: 'hidden_button',
                handler: function () {
                    var O = this.ownerCt;
                    if (O.getForm().isValid()) {
                        if (O.url) O.getForm().getEl().dom.action = O.url;
                        if (O.baseParams) {
                            for (i in O.baseParams) {
                                O.add({
                                    xtype: "hidden",
                                    name: i,
                                    value: O.baseParams[i]
                                })
                            }
                            O.doLayout();
                        }
                        O.getForm().submit();
                    }
                }
            }]
        });
    And I call it from the other formpanel by doing

    Code:
    Ext.getCmp('hidden_button').handler();
    However firebug is giving me the error:

    Code:
    O.getForm is not a function
    help please ?

    I am using v3.1.1

  2. #2
    Sencha User Eugen_'s Avatar
    Join Date
    Feb 2010
    Posts
    106
    Vote Rating
    -4
    Eugen_ is infamous around these parts

      0  

    Default


    Hi nathanblogs,

    Quote Originally Posted by nathanblogs View Post
    Code:
            buttons: [{
                text: "Save",
                id: 'hidden_button',
                handler: function () {
                    var O = this.ownerCt.ownerCt;

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    44
    Vote Rating
    0
    nathanblogs is on a distinguished road

      0  

    Default


    Quote Originally Posted by Eugen_ View Post
    Hi nathanblogs,
    Dammit, I should of been able to combine the broken code of http://www.extjs.com/deploy/dev/docs...form.BasicForm with the broken code of http://www.extjs.com/learn/Manual:Fo...standardSubmit to get it working .

    Thanks for the help.

  4. #4
    Sencha User Eugen_'s Avatar
    Join Date
    Feb 2010
    Posts
    106
    Vote Rating
    -4
    Eugen_ is infamous around these parts

      0  

    Default


    There is a bug in standartSubmit example.

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    44
    Vote Rating
    0
    nathanblogs is on a distinguished road

      0  

    Default


    Here is my solution, probably not the best, hopefully it will help someone else.

    Code:
        var exportForm = new Ext.FormPanel({
            renderTo: document.body, // This is required, wouldn't work without
            standardSubmit: true,
            baseParams: {},
            url: 'exportUrl',
            buttons: [{
                id: 'hidden_button',
                handler: function () {
                    var form = this.ownerCt.ownerCt;
    
                    if (form.getForm().isValid()) {
                        if (form.url) form.getForm().getEl().dom.action = form.url;
    
                        if (form.baseParams) {
    // searchPanel is my panel with all the formfields.
                            searchPanel.form.items.each(function(){
                                form.add({
                                    xtype: 'hidden',
                                    name: this.getName(),
                                    value: this.getValue()
                                });
                            });
                            form.doLayout();
                        }
    
                        form.getForm().submit();
                    }
                }
            }]
        });
    And I just call it from a button on the formpanel like so:

    Code:
         Ext.getCmp('hidden_button').handler();

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

      0  

    Default


    I don't understand why you don't just make an Ajax request?

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    44
    Vote Rating
    0
    nathanblogs is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    I don't understand why you don't just make an Ajax request?
    I need to return a csv file, as far as I am aware you can't do that with an ajax request ?

  8. #8
    Sencha User Eugen_'s Avatar
    Join Date
    Feb 2010
    Posts
    106
    Vote Rating
    -4
    Eugen_ is infamous around these parts

      0  

    Default


    Quote Originally Posted by nathanblogs View Post
    I need to return a csv file, as far as I am aware you can't do that with an ajax request ?
    Do you need to download only the csv file? You can try to use this:

    Code:
    handler: function() {
        document.location = downloadUrl + '?' + yourVariables;
    }
    PHP Code:
    header('Content-Type: text/csv'); 

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

      0  

    Default


    OK, if you need to submit something and receive a file, then submitting a form is the correct way.

  10. #10
    Ext User
    Join Date
    Dec 2008
    Posts
    44
    Vote Rating
    0
    nathanblogs is on a distinguished road

      0  

    Default


    Quote Originally Posted by Eugen_ View Post
    Do you need to download only the csv file? You can try to use this:

    Code:
    handler: function() {
        document.location = downloadUrl + '?' + yourVariables;
    }
    PHP Code:
    header('Content-Type: text/csv'); 
    The problem is getting the data back not sending the query, the solution I have works so it will have to do for now.

    Quote Originally Posted by Animal View Post
    OK, if you need to submit something and receive a file, then submitting a form is the correct way.
    Yeah that's what I need.

Thread Participants: 2