title: Trying to get response from server with Ext.Ajax call in sencha 2
body: <p>I'm trying to create a login form where I post username and password to the server and get the response for processing thorough an Ext.Ajax call. Below is my code:</p>
  
  <p><strong>My login form</strong></p>
  
  <pre><code>Ext.define('GS.view.Main', {
      extend: 'Ext.form.Panel',
      config: {
          fullscreen: true,
          id: 'register',
          frame:true,
          items: [{
              xtype: 'fieldset',
              items: [
                  {
                      xtype: 'textfield',
                      name : 'userName',
                      itemId: 'userName',
                      placeHolder : 'Orgnisationsnummer',
                  },
                  {   
                      xtype: 'passwordfield',
                      name : 'password',
                      itemId: 'password',
                      placeHolder : 'Lösenord'
                  }
              ]
          }, {
              xtype: 'button',
              text: 'Logga in',
              minHeight: '45px',
              action: 'submitFormAction'
          }]
      }
  });
  </code></pre>
  
  <p>My controller </p>
  
  <pre><code>Ext.define('GS.controller.Controller', {
      extend : 'Ext.app.Controller',    
      config : {   
          control : {
              'button[action="submitFormAction"]' : {
                  tap : 'submitForm'
              },
          }
      },
      submitForm : function() {
          var form = Ext.getCmp('register');
          Ext.Ajax.request({
              url : "URL HERE", 
              params : { username : form.getValues().userName, password: form.getValues().password  },
              method: 'POST',
              success: function ( result, request ) {
                  console.log(result);
                  var jsonData = Ext.decode(result.responseText);
                  Ext.Msg.alert('Success', 'Data return from the server: '+ jsonData.msg); 
              },
              failure: function ( result, request) { 
                  Ext.Msg.alert('Failed', result.responseText); 
              } 
  
  
          });
      }
  });
  </code></pre>
  
  <p><strong>My simple PHP script</strong></p>
  
  <pre><code>&lt;?php
  $username = $_POST["userName"];
  $password = $_POST["password"];
  
  
  
  if(!empty($username) &amp;&amp; !empty($password)) {
     $response = array("success" =&gt; 'true', 'id' =&gt; '1');
     echo json_encode($response);
  
  } 
  
  ?&gt;
  </code></pre>
  
  <p>Problem is I get this response from the server: </p>
  
  <pre><code>getAllResponseHeaders: function () {
  getResponseHeader: function (header) {
  request: Object
  requestId: 1
  responseText: ""
  responseXML: null
  status: 200
  statusText: "OK"
  __proto__: Object
  
  Error: You're trying to decode an invalid JSON String:
  </code></pre>
  
  <p>What is going on? What am I doing wrong? Am I not posting the form values correctly or something?</p>
  
  <p>Thanks!</p>
  
  <p>/ The newb :)</p>