无法解析本地json

Question

I am just starting out with Sencha Touch and working on the version 2.2.1. For some reason, I cannot get my local json to parse properly. I know it is not the response problem because I can see the json in my chrome developers tool.

Here is my store

Ext.define('MyApp.store.Tasks', {
    extend: 'Ext.data.Store',
    requires: [
        'MyApp.model.Task'
    ],

    config: {
        autoLoad: true,
        storeId: 'tasksStore',
        model: 'MyApp.model.Task',
        proxy: {
            type: 'ajax',
            url: 'tasks.json',
            reader: {
                type: 'json',
                            rootProperty: 'tasks'
            }
        }

    }
});

Here's my Model

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

    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'task', type: 'string', defaultValue: 'task' }
        ]
    }
});

I am using Jasmine to test my store. Here's my spec

describe('MyApp.store.Tasks', function() {
  it('Number of tasks should be four', function() {
    var store = Ext.create('MyApp.store.Tasks');

    expect(store.getCount()).toBe(4);

  });
});

And, here's my sample json file. It is in the same directory as Sencha's index.html file, which is the root directory.

{
   "tasks":[
      {
         "task":"Some Product",
         "id":0
      },
      {
         "task":"Another Product",
         "id":1
      },
      {
         "task":"A third product",
         "id":2
      },
      {
         "task":"A fourth product",
         "id":3
      }
   ]
}

Is it because of instantiation issues? Or am I missing some critical piece in here? I tried jsonp for proxy type, but it needs a wrapper around the response and I don't quite know how to do it. I am testing on both Safari and Chrome, unfortunately the unit test fails on both browsers.

Thanks!

Answer 1

Store loading is asynchronous, so you cannot access their data immediately after having created them.

To know when the store has been loaded, you can listen on the load event of the store:

var store = Ext.create('MyApp.store.Tasks');

// you cannot use the store's data yet
// expect(store.getCount()).toBe(4);

store.on('load', function(records, success) {
    if (success) {
        // here the store has been loaded
        expect(store.getCount()).toBe(4);
    }
});

Or, you can also pass a callback to the load method :

var store = Ext.create('MyApp.store.Tasks', {autoLoad: false});

store.load({
    callback: function(records, operation, success) {
        if (success) {
            // here the store has been loaded
            expect(store.getCount()).toBe(4);
        }
    }
});

Now, that means that you'll have to make your Jasmine test asynchronous as well:

describe('MyApp.store.Tasks', function() {
    it('Number of tasks should be four', function() {
        var result = null,
            store = Ext.create('MyApp.store.Tasks');

        store.on('load', function(store, records, success) {
            result = success;
        });

        // using jasmine async...
        waitsFor(function() {
            return result !== null;
        });

        // this functin will be executed when the one in waitsFor returns true
        runs(function() {
            expect(store.getCount()).toBe(4);
        });
    });
});