ExtJS AJAX: XMLHttpRequest cannot load

Question

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"     : ""
    }
}

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
Hmm. OK , perhaps you can put the URL to the file absolutely in the url property of the store? — Rob Schmuecker
Thanks again, but same result: "the server reported an error" Do I need to be running this inside something like Tomcat? — Jeff Levine
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