如何将JSON绑定到EXTJS网格

时间:2011-05-05 19:41:07

标签: extjs extjs4

有人可以向我解释为什么这不起作用吗?没有任何错误。

Ext.onReady(function () {
    //Ext.Msg.alert('Status', 'Changes saved successfully.');
    Ext.define('Bond', {
        extend: 'Ext.data.Model',
        fields: ['CUSIP', 'DESCRIPTION', 'COUPONRATE', 'ASKPRICE']
    });

    var store = new Ext.data.Store({
        model: 'Bond',
        proxy: {
            type: 'ajax',
            url: 'http://localhost:3197/Home/GetSecondaryOfferings',
            reader: {
                type: 'json',
                root: 'items',
                totalProperty: 'totalCount'
            }
        }
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            { header: 'CUSIP', dataIndex: 'CUSIP' },
            { header: 'Description', dataIndex: 'DESCRIPTION', width: 100 },
            { header: 'COUPONRATE', dataIndex: 'COUPONRATE', width: 100 },
            { header: 'ASKPRICE', dataIndex: 'ASKPRICE', width: 100 }
         ],
        renderTo: 'example-grid',
        width: 1000,
        autoHeight: true,
        title: 'JSON SIMPLE 2'
    }).render();
});

这是我的JSON对象的样子:

{"totalCount":3316,"items":[{"CUSIP":"989701AL1","DESCRIPTION":"ZIONS BANCORPORATIONSB NT 5.65000% 05/15/2014","COUPONRATE":"  5.650","ASKPRICE":"    104.450"}]}

网格没有填充,我可以看到从服务器返回给我的JSON。

思想?

3 个答案:

答案 0 :(得分:2)

问题在于您使用具有alax / json类型的商店。因为你有一个跨域URL,JSON。

解决方案:确保使用来自同一域的HTTP来托管测试文件,并且一切都应该正常:

   var store = new Ext.data.Store({
        model: 'Bond',
        proxy: {
            type: 'ajax',
            url: 'SOData.json',
            reader: {
                type: 'json',
                root: 'items',
                totalProperty: 'totalCount'
            }
        }
    });

答案 1 :(得分:1)

您需要更改服务以返回jsonp并将商店类型更改为jsonp,这将解决问题,

如果您需要更多信息,请与我们联系

答案 2 :(得分:1)

试试这种方式

var URLdata = window.location.protocol + "//" + window.location.host + "/" + "bigdata-dashboard" + "/conf/" +"survey.json" ;
      var storedata = new Ext.data.Store({
          fields: ['appeId','survId','location','surveyDate','surveyTime','inputUserId'],
            proxy: {
                type: 'rest',
               url:URLdata,
                reader: {
                    type: 'json',
                    root: 'items',
                   // totalProperty: 'totalCount'
                }
            }
        });
           storedata.load();


        // create the grid
        var grid = new Ext.grid.GridPanel({
            store: storedata,
            columns: [
                {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
                {header: "survId", width: 60, dataIndex: 'survId', sortable: true},
                {header: "location", width: 60, dataIndex: 'location', sortable: true},
                {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
                {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
                {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
            ],
            renderTo:'example-grid',
            width:470,
            height:200
        });