PDA

View Full Version : Bind Odata data To EXTJS Grid



xixichensh
1 Nov 2011, 7:22 AM
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
});


});

28982
what wrong with the codes?

mitchellsimoens
1 Nov 2011, 12:22 PM
What is odata.org expecting you to send?

xixichensh
1 Nov 2011, 5:25 PM
take the url write in the browser ,i can return json type data

skirtle
2 Nov 2011, 5:00 PM
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-Origin_Resource_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.