Question

在尝试了一切可以在我的ExtJS网格中获取一些数据以及分页工作正常之后，我现在感觉绝对有自杀倾向。

我的要求是这样的：我必须创建一个网格，其字段（和数据）可以根据用户选择而变化。所以例如如果用户选择“客户”，则网格加载字段：客户ID，客户名称，地址，电子邮件，如果他选择“车辆”，则网格必须加载字段：VehicleType，Brand，Model，Price。

数据量巨大，绝对需要分页。我不想使用客户端分页，因为在大数据的情况下，浏览器将因内存开销而挂起。因此，我试图让服务器端分页。

因此，我创建了一个模型，其字段由AJAX请求（在问题末尾给出的 JSON ）提取的数据填充，该请求由用户选择事件触发：

var fields = [];
var cols = [];


Ext.onReady(function(){
            var tableModel = Ext.define('TableData', {
                extend: 'Ext.data.Model',
                fields:fields
            });

        var url = "<url>";

 //paging toolbar definition
        var pagingGridToolbar = Ext.create('Ext.PagingToolbar', {
               store: tableStore,
               displayInfo: true,
               displayMsg: '{0} - {1} of {2}',
               emptyMsg: "No data to display"
        });

 //Grid definition
        var grid = new Ext.grid.GridPanel({
                id: "idMyGrid",
                store: tableStore,
                columns:cols,
                height:400,
                width:500,
                filterable: true,
                bbar: pagingGridToolbar,
                renderTo:'panel',               
        });

 //Store definition

        tableStore = Ext.create('Ext.data.JsonStore', {
                         model: 'TableData',
                         pageSize: 20,
                         proxy: {
                             type: 'ajax',
                             url: url
                         },
                         reader: {
                             type: 'json',
                             root: 'rowdata',
                             totalProperty: 'totalCount'
                             }
                         });


 //Function that is invoked on user selection event.
       function getDataOnUserSelection(userChoice)
            {
                var url;
                Ext.Ajax.request({
                    url : "<url>",
                    params : {
                        userAction: 'getFieldsData',
                        TABLE_NAME: userChoice,
                    },
                    success : function(r){
                        //After this call returns.
                        var res = Ext.decode(r.responseText, true);
                        cols = res.columns;
                        fields= res.fields;

                        grid.columns=cols;
                        tableModel.setFields(fields);
                        grid.reconfigure(tableStore,cols);
                        var dataURL = "<url2 to get the grid data>"

（如果我使用下面的代码，那么请求被发送到服务器，网格数据被提取（以问题末尾给出的JSON 的形式）并填充在网格中。但是因为我们正在使用add或load将所有数据发送到一个巨大的块中的网格，并且分页不起作用。）

                        Ext.Ajax.request({
                          url : dataURL,
                          success : function(r){
                            var res = Ext.decode(r.responseText, true);  
                            tableStore.add(res.rowdata);                
                          }
                        });

（但是如果我尝试通过更新url来重新加载商店，那么就会进行相同的服务器调用，同样获取相同的JSON但是这里我想要自己刺！）数据不会出现在网格中。）

                        tableStore.getProxy().url = dataURL;
                        tableStore.store.load();

                    }
                });
            }

正如我所提到的，loadData正在一次性加载所有数据，这是我不想要的，因为那时分页不起作用。

用于加载字段和列的JSON（来自对getFieldsData的调用）：

{
    "columns": [
        {
            "dataType": "String",
            "dataIndex": "customerID",
            "header": "customerID"            
        },
        {
            "dataType": "String",
            "dataIndex": "customerName",
            "header": "customerName",

        },
        {
            "dataType": "String",
            "dataIndex": "address",
            "header": "address",

        },
        {
            "dataType": "int",
            "dataIndex": "age",
            "header": "age",

        },
        {
            "dataType": "datefield",
            "dataIndex": "dob",
            "header": "dob",

        }
    ],
    "fields": [
        {
            "name": "customerID",
            "type": "String"
        },
        {
            "name": "customerName",
            "type": "String"
        },
        {
            "name": "address",
            "type": "String"
        },
        {
            "name": "age",
            "type": "Int"
        },
        {
            "name": "dob",
            "type": "Date"
        }
    ]
}

在tableStore.load或tableStore.add上返回的网格数据的JSON是：

{
"totalCount": 2,
"rowdata": [
    {            
        "address": "4861",
        "customerID": "50200",         
        "age": "12",
        "dob": "09/03/2002",
        "customerName": "BOISE"
    },
    {
        "address": "4861",
        "customerID": "50200",         
        "age": "12",
        "dob": "09/03/2002",
        "customerName": "AMSTRA"
    }
]
}

我已经提供了几乎所有细节，但如果您想知道其他任何事情，请告诉我。

请告诉我这里我做错了什么。如果我正在做的事情是正确的/可能的还是可能的吗？

由于

Answer 1

我不确定您的服务器端代码是如何实现的。但是当您使用具有页面大小的商店并调用商店加载方法（例如

）时

tableStore.load({
        params: {
            // specify params for the first page load if using paging
            start: 0,
            limit: 3,
            <other request params>
        }
});

这将使用这些内容作为请求参数进行服务器调用。因此，您必须编写服务器实现，例如它返回3条记录，即页面大小以及用于创建分页工具栏的totalProperty。当您单击工具栏中的后续页面时，它会使用以下参数进行另一次调用，您可以在服务器端使用这些参数来获取特定的页面数据。

_dc：1418621373690
页：2
开始：3
限制：3

ExtJS：存储与JSON读卡器存储不获取load（）数据

1 个答案: