Question

我正在处理OData REST API支持的应用程序。 API在Postman等工具中运行良好，但是当我们尝试将它与Web App一起使用并将返回的数据（即Json）拉入Grid Panel时，就会出现问题。

我的公司希望能够支持大型数据集，因此我们选择Ext JS基于它的BufferedStore Grid。

所以问题是我们无法让它发挥作用。 API的设置方式基于当前的OData 4 Spec。因此它使用$ skip和$ top，就像在我的Ext Store的代理中使用$ startParam和$ limitParam一样。

因此，例如，当我想从我的API获取数据时，URL看起来像这样http://127.0.0.1/odata/BEER/？$ skip = 0＆amp; $ top = 100来获取前100行数据，

并且http://127.0.0.1/odata/BEER/？$ skip = 1＆amp; $ top = 100来获取接下来的100行。数据在Json中，并返回现在BufferedStore Grid之外的问题。

Json看起来像这样

{"@odata.context":"http://127.0.0.1:8080/odata/$metadata#BEER_SAMPLE_LOT","value":[{"Id":17452707,"Name":"BS860-2","Barcode":"BS860-2","Sequence":2578,"Created":null,"Modified":null,"Active":true,"LikedBy":0,"FollowedBy":0,"CI_LOT_NUM":2,"CI_INTENDED_USAGE":"Turbidity Testing","CI_TRIGGER_RUNS":0},{"Id":17452798,"Name":"BS986-2","Barcode":"BS986-2","Sequence":2596,"Created":null,"Modified":null,"Active":true,"LikedBy":0,"FollowedBy":0,"CI_LOT_NUM":2,"CI_INTENDED_USAGE":"Turbidity Testing","CI_TRIGGER_RUNS":0}]}

问题很简单，当页面加载时，网格将加载前100行，但是当你向下滚动它时，它不会预取（正如文档和演示所承诺的那样）。它只是在100处停止。我们尝试过的任何东西都会让它尝试获取下一组。这应该如何运作？

这是我支持网格的商店的代码。

var oDataModel = Ext.create('Ext.data.Model',{
        fields: []
 });

var oDataStore = Ext.create('Ext.data.BufferedStore', {
      storeId: 'beerStore',

      buffered: true,
      autoLoad: true,

      model: oDataModel,

      leadingBufferZone: 100,
      pageSize: 100,

      proxy:{  
        type: 'rest',
        url: http:127.0.0.1/odata/BEER
        pageParam: false, //to remove param "page"
        startParam: '$skip',
        limitParam: '$top', 
        noCache: false, //to remove param "_dc"
        method: 'GET',
        withCredentials: true,

        headers : {
            "Content-Type": "text/json",
        },
        reader:{
          type:'json',
          rootProperty: 'value',
        },
        listeners: {
            exception: function(proxy, response, operation, eOpts) {
                console.log("Exception");
                console.log(response);
            }
        }
      }


    });

下面是我的网格动态。

    // Create Basic Ext Grid
    var oDataGrid = Ext.create('Ext.grid.Panel', {
        title: 'oData Entity Table',
        store: oDataStore,
        height: 400,
        loadMask: true,
        selModel: {
          pruneRemoved: false
        },
        plugins: [{
                ptype: 'bufferedrenderer',
              trailingBufferZone: 10,
              leadingBufferZone: 10,
              scrollToLoadBuffer: 10
            }],
        renderTo: 'oData-grid'
    });

    // Add columns to the data grid
    _that.buildColumns(_that._properties.property, oDataGrid);


   buildColumns: function(__cols,_bGrid){
    var _that = this;



    // Add the row number first
    _bGrid.headerCt.insert(_bGrid.columns.length - 1,{ xtype: 'rownumberer', width: 50 });

    var _column = '';

    for (var n=0; n<__cols.length; n++) {
     //console.log(__cols[n].name);

    _column = Ext.create('Ext.grid.column.Column', {
        text: __cols[n].name,
        width: 100,
        dataIndex: __cols[n].name,
        filter: true,
        renderer:  function(__value){
            var _val = '';

            if(__value instanceof Array){
            for(var i = 0; i < __value.length; i++){
                _val += __value[i].Barcode + "<br>";
            }

        } else if (__value instanceof Object){
            if(!(__value instanceof Date)){
                _val = __value.Barcode + "<br>";
            }else{
                _val = __value;
            }

            } else {
            _val = __value;
            }

        return _val;
        }
    });

    _bGrid.headerCt.insert(_bGrid.columns.length - 1, _column);     //inserting the dynamic column into grid

    }

}

ExtJS的BufferedStore是否可以使用OData REST API

0 个答案: