1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    11
    Vote Rating
    0
    xixichensh is on a distinguished road

      0  

    Default Answered: Bind Odata data To EXTJS Grid

    Answered: Bind Odata data To EXTJS Grid


    Code:
    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?

  2. 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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,559
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What is odata.org expecting you to send?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    11
    Vote Rating
    0
    xixichensh is on a distinguished road

      0  

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

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


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

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

Thread Participants: 2

Tags for this Thread