Question

I am trying to load some data from the json file hosted on the local server but I am getting an error “XMLHttpRequest cannot load http://localhost:8080/data.json?_dc=1355779280677&page=1&start=0&limit=25. Origin null is not allowed by Access-Control-Allow-Origin. " as soon as the application loads. My list is not populated with the records.

My code is as below.

Ext.define('POC.view.HomePage', {
    extend: 'Ext.TabPanel',
    requires:['Ext.TitleBar','Ext.dataview.List',
    'Ext.Ajax','Ext.data.proxy.Ajax'],
    xtype:'homePage', 
    alias: 'widget.wuHomePageView',

     config: {
     fullscreen: true,
        items: [
        {
          title: 'Home',
          iconCls: 'home',

          items: [

       {
    xtype: 'list',
        title: 'Sample',
        height: '100%',
        onItemDisclosure: true,

        store: {
        autoLoad: true,
        fields: ['name'],
            proxy: {
           type: 'json',
           url: 'http://localhost:8080/data.json',
            reader: {
               type: 'ajax',
               rootProperty: 'stores'
                }
                }
                },
             itemTpl: '{name}',

                }],

                },
            {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
                }
            ]
            },

});

My Json File is as below.

{
    "stores": [
        {
            "name": "Science Gallery",
            "logo": "sciencegallery.jpg",
            "desc": "Get some food",
            "telephone": "016261234",
            "city": "Dublin",
            "add1": "Pearse Street",
            "post": "2",
            "country": "Ireland",
            "latitude": "53.34422",
            "longitude": "-6.25006",
            "menu": [
                {
                    "item": "SC Sandwich"
                },
                {
                    "item": "SC Toasted Sandwich"
                },
                {
                    "item": "SC Panini"
                },
                {
                    "item": "SC Ciabatta"
                },
                {
                    "item": "SC Burrito"
                }
            ]
        },
        {
            "name": "Spar",
            "logo": "spar.jpg",
            "desc": "Get some food",
            "telephone": "016261234",
            "city": "Dublin",
            "add1": "Mayor Street",
            "post": "2",
            "country": "Ireland",
            "latitude": "53.34422",
            "longitude": "-6.25006",
            "menu": [
                {
                    "item": "Spar Sandwich"
                },
                {
                    "item": "Spar Toasted Sandwich"
                },
                {
                    "item": "Spar Panini"
                },
                {
                    "item": "Spar Ciabatta"
                },
                {
                    "item": "Spar Burrito"
                }
            ]
        }
    ]
}

Please help.

Thanks

Answer 1

There is no such a thing like a json proxy! You have to use an ajax proxy:

proxy: {
   type: 'ajax',
   .....
}