Question

我正在使用从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);
        }
    });

}，

Answer 1

首先，您不需要像这样明确地执行AJAX调用。它们将在商店代理的幕后为您完成 - 前提是代理配置正确（此时您的注释已被注释掉）。

您的任务非常简单，并且有多个示例。看看this one。单击右侧的“详细信息”以查看代码。

另见Ext.toolbar.Paging文档。

ExtJs 5动态网格分页

1 个答案: