Results 1 to 7 of 7

Thread: I canít send form data by CRUD.

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    21

    Default I canít send form data by CRUD.

    I have created an application using MVC and CRUD pattern. My Application has to send data to server by form. I used ExtJs 5.0.1 and PHP 5.3 on my server. You can see demo here: http://test.saitografia.ru/extjs5/index.htm

    app/index.js
    Code:
    var App = Ext.application
    (
        {
        name: 'App',
        appFolder: 'app',
        controllers: ['Enter'],
            launch: function()
            {
            this.EnterWindow = new App.view.EnterWindow();
            this.EnterWindow.show();
            }
        }
    );
    app/controller/ Enter.js
    Code:
    Ext.define('App.controller.Enter', 
        {
        extend: 'Ext.app.Controller',
            views: 
            [
            'EnterWindow',
            'EnterForm',
            'EnterButtonSend',
            'EnterButtonReset'
            ],
        models: ['EnterFormModel'],    
            init: function()
            {
            var thisObj = this;
                    
                this.control
                (
                    {
                        "App\\.view\\.EnterWindow button[action=send]":
                        {
                            click: function(button)
                            {
                                if(button.up("window").down("form").getForm().isValid() == true)
                                {    
                                    var Mask = new Ext.LoadMask
                                    (
                                        {
                                        target: button.up("window")
                                        }
                                    );
                                    
                                Mask.show();
                                var EnterFormModel = Ext.create(thisObj.getModel("EnterFormModel"), button.up("window").down("form").getForm().getValues());
                                
                                    EnterFormModel.save
                                    (
                                        {
                                            success: function(form, action)
                                            {                                        
                                            Mask.hide();
                                            
                                            alert(action.getResponse().responseText);
                                            },
                                            failure: function(form, action, option)
                                            {
                                            Mask.hide();
                                            
                                            alert(action.getResponse().responseText);    
                                            }
                                        }
                                    );
                                }
                                else
                                {
                                    Ext.Msg.show
                                    (
                                        {
                                        title: "??????????????",
                                        msg: "????????? ???? ? ????? ????????? ???????????!",
                                        icon: Ext.MessageBox.WARNING,
                                        buttons: Ext.MessageBox.OK
                                        }
                                    );    
                                }    
                            }
                        },
                        "App\\.view\\.EnterWindow button[action=reset]":
                        {
                            click: function(button)
                            {
                            button.up("window").down("form").getForm().reset();
                            }
                        }
                    }
                );
            }
        }
    );
    app/model/EnterFormModel.js
    Code:
    Ext.define('App.model.EnterFormModel',
        {
        extend: 'Ext.data.Model',
        
            fields: 
            [
            "login",
            "password"
            ],
            proxy:
            {
            type: 'ajax',
            actionMethods: 'POST',
                api:
                {
                create: "app/data/enter.php"
                },
                reader:
                {
                type: 'json',
                root: 'contatos',
                successProperty: 'success'
                },
                writer:
                {
                type: 'json',
                writeAllFields: true,
                encode: true,
                root: 'contatos'
                }
            }
        }
    );
    app/view/EnterWindow.js
    Code:
    Ext.define('App.view.EnterWindow', 
        {
        extend: 'Ext.Window',
        alias: 'widget.App.view.EnterWindow',
        
        width: 400,
        title: "Enter in admin",
        closable: false,
        resizable: false,
            tbar:
            [
                {
                xtype: "App.view.EnterForm"
                }
            ],
            fbar:
            [                
                {
                xtype: "App.view.EnterButtonSend"
                },
                {
                xtype: "App.view.EnterButtonReset"
                }
            ]
        }
    );
    app/view/EnterWindow.js
    Code:
    Ext.define('App.view.EnterWindow', 
        {
        extend: 'Ext.Window',
        alias: 'widget.App.view.EnterWindow',
        
        width: 400,
        title: "Enter in admin",
        closable: false,
        resizable: false,
            tbar:
            [
                {
                xtype: "App.view.EnterForm"
                }
            ],
            fbar:
            [                
                {
                xtype: "App.view.EnterButtonSend"
                },
                {
                xtype: "App.view.EnterButtonReset"
                }
            ]
        }
    );
    app/view/EnterForm.js
    Code:
    Ext.define('App.view.EnterForm', 
        {
        extend: 'Ext.form.FormPanel',
        alias: 'widget.App.view.EnterForm',
        
        padding: 10,
        frame: true,
        bodyBorder: false,
        border: false,
            items:
            [
                {
                xtype: "textfield",
                fieldLabel: "Login:",
                labelSeparator: "",
                labelWidth: 80,
                name: "login",
                width: 360
                },
                {
                xtype: "textfield",
                fieldLabel: "Password:",
                labelSeparator: "",
                labelWidth: 80,
                name: "password",
                width: 360
                }
            ]
        }
    );
    app/view/EnterForm.js
    Code:
    Ext.define('App.view.EnterButtonSend', 
        {
        extend: 'Ext.button.Button',
        alias: 'widget.App.view.EnterButtonSend',
        
        text: "Enter",
        action: 'send'
        }
    );
    app/view/EnterButtonReset.js
    Code:
    Ext.define('App.view.EnterButtonReset', 
        {
        extend: 'Ext.button.Button',
        alias: 'widget.App.view.EnterButtonReset',
        
        xtype: "button",
        text: "Reset",
        action: "reset"
        }
    );
    app/data/ enter.php
    PHP Code:
    <?php
    print_r
    ($_GET);
    print_r($_POST);
    ?>
    When I inputted something in my form and clicked ďEnterĒ I saw this:

    Array
    (
    [_dc] => 1417469807260
    )
    Array
    (
    )

    Itís something strange, because my data in form isnít sent to the server. Why? I added this:
    Code:
    var EnterFormModel = Ext.create(thisObj.getModel("EnterFormModel"), button.up("window").down("form").getForm().getValues());
    and I think this command inputted my data to the model, and after that I send it like this:
    Code:
    EnterFormModel.save();
    But it doesnít work!

  2. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi Reverent--

    Try updating the "root" of your writer (and your reader, while you're at it) to be "rootProperty".

    And I'm including below a fiddle with a working example of your code:

    Hope that helps!


  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    21

    Default

    I understood what wrong. I have to use payload if I want to take sent data:
    Code:
    // PHP
    $pol = file_get_contents("php://input");
    $json = json_decode($pol, true);
    But I thought the data is sent by POST or GET. Ok. Can I rewrite ExtJS code if I want use GET or POST in my server?

  4. #4
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by Reverent View Post
    But I thought the data is sent by POST or GET. Ok. Can I rewrite ExtJS code if I want use GET or POST in my server?
    Sure. You could create a custom writer to transform the requests to fit your needs. You might take a look at extending the Json writer, or using it as a point of reference for creating a similar one.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    21

    Default

    Ok, thank you. Iíll try it.

  6. #6
    Sencha User MiamiCoder's Avatar
    Join Date
    Mar 2009
    Location
    Miami, FL
    Posts
    144
    Answers
    3

    Default

    Based on your code, you are using a POST. Try setting the headers config of the proxy: headers:{'Content-Type':'application/x-www-form-urlencoded'}. Your payload should be sent as form parameters.

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    21

    Default

    I added this string:
    Code:
    headers:
    {
     'Content-Type': 'application/x-www-form-urlencoded'
    },
    But it didn't help me!
    Ok, I used this on PHP and resolved my problem:
    PHP Code:
    file_get_contents("php://input"
    But, now I want to sent file to server, and I don't know how can I do it by CRUD. I added this string:
    Code:
    headers:
    {
     'Content-Type': 'multipart/form-data'
    }
    It didn't work, and I can't use file_get_contents("php://input") because it has only string data.

    Anybody have idea?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •