Importing data into Sencha Touch store from JSON file

Question

Importing Data from JSON file to Store

I have begun developing an app where I use Sencha Touch for the frontend design and java to query the database on the backend. However, I am having trouble integrating the two together. I tried returning the data from a java query into a .json file in json format and then loading that into my app through a store but it doesn't seem to be working. I get the error in the Chrome console as shown below.

OPTIONS localhost:8080/ProficyAppData/WebContent/app/store/info.json?_dc=1342618907990&page=1&start=0&limit=25 Resource failed to load

I have my project contained in an eclipse Java Web Project so that I could easily utilize the localhost server. I am unsure as to why the json data is not loading into the store.

Store:

Ext.define('MyApp.store.Questions', {
extend: 'Ext.data.Store',

config: {
autoLoad: true,
model: 'MyApp.model.Question',

proxy: {
type: 'ajax', 
url: 'localhost:8080/ProficyAppData/WebContent/app/store/info.json',
reader: 'json'
},
listeners: {
load: function() {
console.log(this);
}
},
}
});

Model:

Ext.define('MyApp.model.Question', {
extend: 'Ext.data.Model',

config: {
fields: ['id', 'criteria', 'description', 'questionName', 'type']
}
});

info.json:

[
     {
          "id": 1,
          "criteria": "no criteria yet",
          "description": "no description yet",
          "questionName": "no question yet",
          "type": "n/a"
     },
     {
          "id": 2,
          "criteria": "no criteria yet",
          "description": "no description yet",
          "questionName": "no question yet",
          "type": "n/a"
     },
     {
          "id": 3,
          "criteria": "no criteria yet",
          "description": "no description yet",
          "questionName": "no question yet",
          "type": "n/a"
     },
     {
          "id": 4,
          "criteria": "no criteria yet",
          "description": "no description yet",
          "questionName": "no question yet",
          "type": "n/a"
     },
     {
          "id": 5,
          "criteria": "no criteria yet",
          "description": "no description yet",
          "questionName": "no question yet",
          "type": "n/a"
     },
     {
          "id": 6,
          "criteria": "no criteria yet",
          "description": "no description yet",
          "questionName": "no question yet",
          "type": "n/a"

     }
]


  [1]: https://i.stack.imgur.com/3zxuD.png

Ok. I would ask this question with a java tag then, so that someone in java can help you with the web server. Also, you don't need to save it as a "json" file, you can simply respond to the request with the json data. You will need to have the server outputting the correct json data before we can help you on the extjs side :) — Neil McGuigan, Jul 18 '12 at 19:39

score 1 · Answer 1 · answered Aug 02 '14 at 05:57

i do have a similar sample which i came up with which kind of matches your question...take a look

model:

 Ext.define('MyApp.model.user',{
 extend: 'Ext.data.Model',


   config: {

        identifier:{
          type:'uuid'
        },
       fields: [
        {
          name:'id',
          type:'string'
        },

       {
          name: 'name',
          type:'string'
       },
       {
          name: 'mobile',
          type:'number'
       },
        {
          name: 'birthday',
          type:'date'
       },
       {
          name: 'email',
          type:'email'
       },
        {
          name: 'password',
          type:'password'
       },
       {
          name:'haveid',
          type:'boolean'
       },
       {
        name:'photo'
       }
       ],

 }});

store:

Ext.define('MyApp.store.UserStore',{
extend:'Ext.data.Store',

   config: {
    model: 'MyApp.model.user',
    storeId: 'userstore',
    autoload:true,
    proxy: {
        type: 'ajax',
        id: 'userstoreproxy',
        url:'./resources/json/user.json',
        method:'POST',

    // .../RESOURCES/JSON/USER.JSON
        reader:
        {
            type:'json',
            rootProperty:'form.fields'
        }


    }
}});

listener to be added to the view:

listeners:{
painted:function()
{
    var store=Ext.getStore('userstore');

    store.load({
        callback:function(records)
        {
            localStorage.name=records[0].getData().name;
            localStorage.mobile=records[0].getData().mobile;
            localStorage.birthday=records[0].getData().birthday;
            localStorage.email=records[0].getData().email;
            localStorage.password=records[0].getData().password;


        }

    });
    console.log(store.data);
    // var data=JSON.parse(store.data);
    // console.log(data);        
    var record=store.getAt();
    console.log(record);
     // var bday=localStorage.birthday;
     // if(bday)
     // {
     //    bday.setHours(0);
     //    bday.setMinutes(0);
     //    bday.setSeconds(0);
     //    bday.setMilliseconds(0);
     // }
     // console.log(bday);
    Ext.getCmp('name').setValue(localStorage.name);
    Ext.getCmp('mobile').setValue(localStorage.mobile);
     Ext.getCmp('birthday').setValue();
    Ext.getCmp('email').setValue(localStorage.email);
     Ext.getCmp('password').setValue(localStorage.password);

}}

the controller:

Ext.define('MyApp.controller.usercontroller', {
extend: 'Ext.app.Controller',

config: {
    control: {
       save: {
            tap: 'FormSave'
        }

    },

    refs: {
        form:'basicform',
        save: 'button[action=save]'

    }
},

FormSave: function(button,e,options){

  var details=this.getForm().getValues();
  console.log(details);
  var userStore = Ext.getStore('userstore');
  userStore.add(details);
  userStore.sync();
  console.log(details.id);
  Ext.Msg.alert('SUCCESS', 'Data Saved to Local Storage Successfully');}});

pls write an appropriate view and json.. this should work fine except for the birthday

score 0 · Answer 2 · answered Jul 18 '12 at 20:05

0

You could launch out app from your favorite browser, something like this,

http://localhost:8080/ProficyAppData/your_name_app.html

I hope this helps. :)

answered Jul 18 '12 at 20:05

hekomobile

1,388
1
14
35

I am confused at what you mean. I have done this. I am able to view my app in the browser. I get the error I mentioned above when trying to load the json file however. – Mike Jul 19 '12 at 14:38

Importing data into Sencha Touch store from JSON file

2 Answers2