ExtJs 5 动态网格分页

Posted 2023-02-26

【中文标题】ExtJs 5 动态网格分页

【英文标题】：ExtJs 5 Dynamic Grid pagination

【发布时间】：2015-07-01 18:25:57

【问题描述】：

我正在使用从 POST 休息请求到服务器的数据创建一个动态网格（应该分页）（下面的代码）。我在第一个请求期间（加载时）将 pageid 和 pagesize 传递给服务器，它会用适当的数据进行响应。我已经将一个分页工具栏停靠在网格上，现在我想在点击寻呼机的下一个、最后一个等时启用分页。如何向服务器发布请求并取回适当的数据以使用下一页的数据重新配置网格？

var screenResults = ;
screenResults.pageid =1;
screenResults.pagesize = 10;
screenResults = Ext.JSON.encode(screenResults);

 Ext.Ajax.request(
        url     : 'http://localhost/service/getGridData',
        method  : 'POST',
        timeout: 5000000,
        scope: this,
        dataType: 'json',
        jsonData: screenResults,
        success: function(response)
            var grid = Ext.getCmp("idSearchResultsGrid");
            var gridData = Ext.decode(response.responseText);

            var fields = gridData.data.fields;
            var newColumns = gridData.data.columns;
            var arr = gridData.data.data;

            var data = [];
            for(var i=0;i<arr.length;i++)
                var obj = arr[i].resultsMap;
                data.push(obj);
            

            var newStore = Ext.create('Ext.data.Store', 
                storeId: 'DynamicGridStore',
                pageSize:10,
                fields: fields,
                data: data
                /*
                proxy: 
                    type: 'ajax',
                    url     : 'http://localhost/service/getGridData',
                    method  : 'POST',
                    timeout: 5000000,
                    jsonData: screenResults,
                    actionMethods: 
                            read   : 'POST'
                        

                
                */
            );
            //debugger;
            /*
            globalStore = newStore.load(
                params: 
                    start: 0,
                    limit: 10
                
            );
            */

            var pagingBar = Ext.create('Ext.PagingToolbar', 
                pageSize: 10,
                store: newStore,
                dock: 'bottom',
                displayInfo: true
            );

            grid.removeDocked(grid.getDockedItems()[1]);
            grid.addDocked(pagingBar);
            grid.reconfigure(newStore, newColumns);
        ,
        failure: function(response)
                console.log(response);
        
    );

,

【参考方案1】：

首先，您不需要像那样显式地进行 AJAX 调用。它们将由商店的代理在幕后为您完成——前提是代理已正确配置（您的代理目前已被注释掉）。

您的任务非常琐碎，并且包含多个示例。看看this one。点击右侧的Details查看代码。

另请参阅Ext.toolbar.Paging 文档。