由於不明白分頁的總數是怎麼計算，不知道他的分頁方式所以花費了好多功夫，現在弄出來了與大家分享下

1.首先是EF的簡歷，想必大家都清楚：新增-〉新建項-〉資料-〉Ado。net實體資料模型

2.就是後臺資料也就是apiController，前臺需要兩個資料，一個是資料的總條數，第二個是要查詢的分頁資料

所以我們要建立一個實體，用於返回資料傳送，由於多個頁面都使用，多以用到了泛型。程式碼如下：

public class PageData<T>
    {
        //資料總數
        public int TotolRecord { get; set; }

        //需要返回的資料        
        public T Data { get; set; }

    }
 

3.組織需要向前臺返回的資料

 /// <summary>
        /// 獲取所有的監控資訊
        /// </summary>
        /// <returns></returns>
        public PageData<Monitor[]> Get([FromUri]string _dc, [FromUri] int page, [FromUri] int start, [FromUri] int limit)
        {
            OlandHIPDBInterfaceTrackEntities db = new OlandHIPDBInterfaceTrackEntities();

            //返回資料包含資料總數
            PageData<Monitor[]> returnData = new PageData<Monitor[]>();

            IQueryable<Monitor> data = from item in db.Monitor
                        orderby item.ID
                        select item;

            returnData.TotolRecord = data.ToArray().Length;

            data=data.Skip<Monitor>(start);

            data=data.Take<Monitor>(limit);

            returnData.Data =data .ToArray<Monitor>();

            return returnData;
        }
 

好了，後臺資料準備完畢，那麼就開始Extjs部分的了

4.Extjs部分我就直接上程式碼了

Ext.require([
'*',
'Ext.toolbar.Paging',
'Scripts.*'
])

Ext.onReady(function () {


    Ext.define('InterfaceTrackModel', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'ID',
            type: 'int',
            useNull: true
        },
         'Invoker',
         'MachineName',
          'MachineIP',
           'InvokeDate',
            'Interface',
            'InterfaceDes',
            'IsSuccessed',
            'ConsumeTime',
            'ErrorMessage',
            'Remark'
            ]
    });

    var InterfaceTrackStore = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'InterfaceTrackModel',

        //設定分頁大小
        pageSize: 20,
        proxy: {
            type: 'rest',
            url: 'api/InterfaceTrack',
            reader: {
                type: 'json',
                root: 'Data',
                //獲取資料總數
                totalProperty: 'TotolRecord'
            },
            writer: {
                type: 'json'
            }
        }
    });



    var selModel = Ext.create('Ext.selection.CheckboxModel', {
        width: 55
    });


    //將時間轉化為 2011-08-20 00:00:00 格式 
    //解決Ext4的formPanel通過grid的store查詢問題 2012.2.22 jzr 
    function dateFormat(value) {
        if (null != value) {
            //return Ext.Date.format(new Date(value), 'Y-m-d H:i:s');
            return Ext.Date.format(new Date(value), 'Y-m-d H:i:s');
        }
        else {
            return null;
        }
    }

    Ext.define('Scripts.InterfaceTrackGrid', {
        extend: 'Ext.grid.GridPanel',
        title: '介面監控',
        id: 'InterfaceTrackGrid',
        initComponent: function () {
            Ext.apply(this, {
                closable: true, //是否可關閉
                width: 400,
                height: 300,
                frame: true,

                store: InterfaceTrackStore,
                iconCls: 'icon-user',
                // selModel: selModel,

                viewConfig: {
                    getRowClass: function (record) {
                        return record.get('IsSuccessed') ? '' : 'error-row';
                    } 
                },


                columns: [Ext.create('Ext.grid.RowNumberer', { width: 35, text: '序號' }),
         {
             text: '編號',
             width: 50,
             sortable: true,
             dataIndex: 'ID'
         }, {
             text: '呼叫者',
             width: 80,

             dataIndex: 'Invoker'

         }, {
             header: '機器名',
             width: 80,
             sortable: true,
             dataIndex: 'MachineName'

         }, {
             text: '機器IP',
             width: 100,
             // xtype: 'checkcolumn',
             dataIndex: 'MachineIP'

         }, {
             text: '呼叫時間',
             width: 140,
             sortable: true,
             dataIndex: 'InvokeDate',
             renderer: dateFormat

         }, {
             text: '呼叫介面',
             width: 120,
             sortable: true,
             dataIndex: 'Interface'

         }, {
             text: '介面描述',
             width: 140,
             sortable: true,
             dataIndex: 'InterfaceDes'

         }, {
             text: '是否成功',
             width: 80,
             sortable: true,
             dataIndex: 'IsSuccessed'

         }, {
             text: '耗時',
             width: 80,
             sortable: true,
             dataIndex: 'ConsumeTime'

         }, {
             text: '錯誤資訊',
             width: 160,
             sortable: true,
             dataIndex: 'ErrorMessage'

         }, {
             text: '備註',
             width: 80,
             sortable: true,
             dataIndex: 'Remark'

         }],
                bbar: Ext.create('Ext.PagingToolbar', {
                    store: InterfaceTrackStore,
                    displayInfo: true,
                    displayMsg: '顯示{0}-{1}條,共計{2}條',
                    emptyMsg: "沒有資料"
                })
            }),
        this.callParent(arguments);
        }
    });
    //載入資料
    //    InterfaceTrackStore.load({
    //        params: {
    //            start: 0,
    //            limit: 20
    //        }
    //    });
})
 

這裡注意的地方，前臺接受資料的時候

 reader: {
                type: 'json',
                root: 'Data',
                //獲取資料總數
                totalProperty: 'TotolRecord'
            },

檢測後臺傳過來的資料，分頁資料對應的是Data鍵值對，資料總資料條數為

TotolRecord鍵值對 最終效果圖：

這裡面還設計了webaip的傳值接受問題，可以參考 webapi下如何傳值