Bind Odata data To EXTJS Grid

[xixichensh]

Ext.onReady(function () {

    var proxy = new Ext.data.HttpProxy({ url: 'http://services.odata.org/Northwind/Northwind.svc/Customers?$format=json' });
    //定义reader
    var reader = new Ext.data.JsonReader(
        {


        }, [
            { name: 'OrderID', mapping: 'OrderID' },
            { name: 'CustomerID' }, //如果name与mapping同名,可以省略mapping
            { name: 'Freight' },
            { name: 'ShipName' },
            { name: 'ShipCity' }
        ]
		);
    //构建Store   
    var store = new Ext.data.Store({
        proxy: proxy,
        reader: reader,
        root: 'd',
        //url: 'http://services.odata.org/Northwind/Northwind.svc/Orders?$format=json',
        IdProperty: 'OrderId'
        //fields:['OrderId','CustomerID','Freight','ShipName','ShipCity']
    });
    //载入
    store.load();




    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            { header: "OrderID", width: 60, dataIndex: 'OrderID', sortable: true },
            { header: "CustomerID", width: 60, dataIndex: 'CustomerID', sortable: true },
            { header: "Freight", width: 60, dataIndex: 'Freight', sortable: true },
            { header: "ShipName", width: 100, dataIndex: 'ShipName', sortable: true },
            { header: "ShipCity", width: 100, dataIndex: 'ShipCity', sortable: true },
        ],
        renderTo: 'example-grid',
        width: 540,
        height: 200
    });


});

567.jpg
what wrong with the codes?

[mitchellsimoens]

What is odata.org expecting you to send?

[xixichensh]

take the url write in the browser ,i can return json type data

[skirtle]

You're attempting to do an Ajax request to a site with a different origin. The browser is attempting to use CORS to overcome this which sends an OPTIONS request for preflighting. The server is returning a 501 in response to the OPTIONS request.

http://en.wikipedia.org/wiki/Same_origin_policy
http://en.wikipedia.org/wiki/Cross-O...source_Sharing
https://developer.mozilla.org/En/HTTP_access_control

Typing the URL directly into the browser address bar will just load the resource using a GET request, the same origin policy does not apply.

You cannot make a request directly to odata.org from a browser using Ajax unless odata.org supports CORS. JSON-P is an alternative but again it requires odata.org to support it. If neither is provided then you'll need to proxy the requests through your own server.