AJAX call to REST service doesn't display results in page but a call to the same response in a flat file does

I'm trying to make a call to WCF Data Services and display the results in a GridPanel.

The call works and returns the correct JSON except the GridPanel doesn't display any results. I tried copying the returned json into a file also on the webserver and replacing the destination url for that. This worked correctly and displays the results.

So as far as I can tell the JSON, the code and the service are all correct but they don't work together properly.

The Ext JS

Ext.define('Customer', {
                extend: 'Ext.data.Model',
                fields: ['Id', 'CustomerName'],
                proxy: {
                    headers: {
                        'Accept' : 'application/json'
                    },
                    type: 'rest',
                    url: 'Service.svc/Customers',
                    reader: {
                        type: 'json',
                        root: 'd'
                    }
                }
            });

The JSON back from the service

{
    "d" : [
        {
            "__metadata": {
                "uri": "http://localhost:52332/testservice.svc/Customers(1)", 
                "type": "PierbridgeShinePlatformTestModel.Customer"
            }, 
            "Id": 1, 
            "CustomerName": 开发者_如何学Python"fred", 
            "Invoices": {
                "__deferred": {
                    "uri": "http://localhost:52332/testservice.svc/Customers(1)/Invoices"
                }
            }
        },
        {
            "__metadata": {
                "uri": "http://localhost:52332/testservice.svc/Customers(2)", 
                "type": "PierbridgeShinePlatformTestModel.Customer"
            }, 
            "Id": 2, 
            "CustomerName": "Mr Fred", 
            "Invoices": {
                "__deferred": {
                    "uri": "http://localhost:52332/testservice.svc/Customers(2)/Invoices"
                }
            }
        }
    ]
}