0

New to ExtJS. All of the files below exist within the same directory (code below) - not sure why I'm getting the following error. Do I need to be using a server even though the data is stored in the directory? I'm getting the following on the Chrome console:

XMLHttpRequest cannot load file:///C:/Users/Jeff/Development/workspace_extjs/Chapter%2007/JSON_data/data.json?_dc=1406036611330&page=1&start=0&limit=25. 
Received an invalid response. Origin 'null' is therefore not allowed access. JSON_data.html:1
the server reported an error JSON_data.js:39

JSON_data.js:

Ext.onReady(function(){

    // Instantiate JSON store
    var departmentStore = Ext.create('Ext.data.Store', {
        fields: [
            'name',
            'active',
            'dateActive',
            'dateInactive',
            'description',
            'director',
            'numEmployees',
            {
                name: 'id',
                type: 'int'
            }
        ],
        // Configure AJAX proxy - communicates with data
        proxy: {
            type: 'ajax',
            url: 'data.json',
            // Configure JSON reader - reads and parses data
            reader: {
                type: 'json',
                root: 'data',
                idProperty: 'id',
                successProperty: 'meta.success'
            }
        }
    });

    // Print out first record or error
    departmentStore.load({
        callback: function(records, operation, successful){
            if (successful){
                console.log('department name:', records[0].get('name'));
            }
            else {
                console.log('the server reported an error');
            }
        }
    });
});

JSON_data.html:

<!doctype html>
<html>
    <head>

        <link rel="stylesheet" type="text/css" href="../../lib/extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="../../lib/extjs/ext-all-debug.js"></script>

    </head>
    <body>

        <script type="text/javascript" src='JSON_data.js'></script>

    </body>
</html>

data.json (snippet):

{
    "data" : [
        {
            "name"         : "Media Relations",
            "active"       : "",
            "dateActive"   : "04/18/2013",
            "dateInactive" : "",
            "description"  : "",
            "director"     : "",
            "numEmployees" : "7",
            "id"           : "1"
        },
        {
            "name"         : "Sales and Marketing",
            "active"       : "",
            "dateActive"   : "03/12/2012",
            "dateInactive" : "",
            "description"  : "",
            "director"     : "",
            "numEmployees" : "9",
            "id"           : "2"
        },
        {
            "name"         : "Advertising",
            "active"       : "",
            "dateActive"   : "02/15/2013",
            "dateInactive" : "",
            "description"  : "",
            "director"     : "",
            "numEmployees" : "6",
            "id"           : "100"
        }
    ],
    "meta" : {
        "success" : true,
        "msg"     : ""
    }
}
Jeff Levine
  • 2,083
  • 9
  • 30
  • 38
  • 1
    Yeh looks like it http://stackoverflow.com/questions/21012385/error-in-chrome-only-xmlhttprequest-cannot-load-file-url-no-access-control-all – Rob Schmuecker Jul 22 '14 at 14:04
  • Thanks - when I run it in Firefox, I don't get any errors, but not a successful result either: "the server reported an error" – Jeff Levine Jul 22 '14 at 14:16
  • Hmm. OK , perhaps you can put the URL to the `file` absolutely in the `url` property of the store? – Rob Schmuecker Jul 22 '14 at 14:17
  • Thanks again, but same result: "the server reported an error" Do I need to be running this inside something like Tomcat? – Jeff Levine Jul 22 '14 at 14:22
  • Yes ideally if you're going to be running a lot of ExtJS then you should be running it off a localhost such as Apache or Tomcat. I see on my local versions a lot of the examples require a call to a php file to generate the `remote` data. – Rob Schmuecker Jul 22 '14 at 14:23
  • So is that why I'm getting the server error message? – Jeff Levine Jul 22 '14 at 14:24
  • 1
    Yep most likely. If you can access the page via `localhost/bla/bla/bla` then the relative url of the `url` property will also ask the localhost to `serve` the file which will in all likelihood solve your issue. – Rob Schmuecker Jul 22 '14 at 14:25

0 Answers0