Sencha Touch Cant decode and load JSON response to data model

Question

I am terribly suffering with one of the issue in sencha touch for getting the server response. I have an application where i need to communicate to my server and server in turn will interact with the DB and serves the information in the form of JSON. Now, my problem statement is on successful log in to the application the application need to load the models. The models uses proxy to download the JSON and renders on the screen UI. Issue starts here.

I am using Servlet for getting the JSON service. For example purpose i have hard coded the json. Find the below Servlet code.

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class LoginJSONServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;       

    public LoginJSONServlet() {
        super();       
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {       
        try {
            response.setContentType("application/json");                        
            String jsonText = "[{\"quoteName\":\"Home care\",\"timeStamp\":\"May2011\"}]";                  
            response.getWriter().write(jsonText);

        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }
}

It is printing the required JSON in browser after deployment as {"quoteName":"Home care","timeStamp":"May2011"}

Now, here is my client side sencha touch code

here is my store

App.stores.SavedStore = new Ext.data.JsonStore({
    model: 'SavedModel',
    autoLoad: true
});

here is my model

App.models.SavedQuoteMod = Ext.regModel('SavedQuoteMod', {
   fields: [
       {name:'quoteName' , type: 'string' },
       {name:'timeStamp' , type: 'string' }
   ],


   proxy:{
          type: 'ajax',
          format: 'sencha',
          url: 'http://localhost:8091/Sencha/LoginServlet',
          reader: {
               type: 'json',
               root: 'data'
          },


  /* proxy:{
    type: 'ajax',
    url: 'http://172.16.30.18:8091/Sencha/JSONServlet',
    reader: {type:'json'},
    writer: {type:'json'},
   }*/                       
});

I am totally confused what proxy request type i have to use Ajax, JSONP or any other. My code doesn't work. please help me.

nscrob nscrob · Accepted Answer · 2011-10-04T12:31:48

The problem is with the reader. If you specify the root : 'data' it will expect a json that looks like : data:[{"quoteName":"Home care","timeStamp":"May2011"},... so just remove the root:'data' line and it should work

Edit The store is the one who should have a proxy defined.

App.stores.SavedStore = new Ext.data.JsonStore({
    model: 'SavedQuoteMod',
    autoLoad: true,
    proxy:{
          type: 'ajax',
          format: 'sencha',
          url: 'http://172.16.30.18:8091/Sencha/subhash.json',
          reader: {
               type: 'json',
          },

});

App.models.SavedQuoteMod = Ext.regModel('SavedQuoteMod', {
   fields: [
       {name:'quoteName' , type: 'string' },
       {name:'timeStamp' , type: 'string' }
   ]
});

Configured like this the stores expects a json containing an array of tuples like [{"quoteName":"Home care","timeStamp":"May2011"}, which is actualy what you send, If you set the config root for the proxy it expects the data for the store to be in an attribute like data:[{....

Sencha Touch Cant decode and load JSON response to data model

1 Answers