0

我已经搜索过这个问题的高低......我发现很多人都有同样的问题,但没有一个明确的解决方案......基本上我在extjs上有一个网格......它从sqldb获取数据。它使用 json 加载良好。“但是”......当尝试实现分页时,这就是它变得混乱的地方......

  1. pagesize 设置为 5... 这意味着第一页应该只显示 5 条记录,但我的网格显示了整个记录

  2. 即使“下一步”按钮存在,它在技术上也不起作用,因为整个记录已经在第一页上

  3. 我设置 page.loadPage(2)... 并且消息显示“正在显示第二页”,但它实际上是在显示整个记录

  4. “Page _ of 6”中的页码始终为空白。见下图...

    在此处输入图像描述

下面是我的店...

       var store = Ext.create('Ext.data.Store', {
        storeId: 'myData',
        pageSize: 5,
        autoLoad: true,
        method: "POST",
        remoteSort: true,
        fields: [
    { name: 'Q1', type: 'int' },
    { name: 'Q2', type: 'int' },
    { name: 'Q3', type: 'int' },
    { name: 'Q4', type: 'int' },
    { name: 'Q5', type: 'int' },
    { name: 'Improvements', type: 'string' },
    { name: 'Comments', type: 'string' }
    ],

        sorters: [
        {
            property: 'Q1',
            direct: 'ASC'
        }
     ],

        proxy: {
            type: 'ajax',
            url: 'GridView/writeRecord',
            reader: {
                type: 'json',
                totalProperty: "count",
                root: "myTable"
            }
        },
        autoLoad: { params: { start: 0, limit: 5} }   

    });

    this.grid = Ext.create('Ext.grid.Panel', {
        title: ' ',
        trackMouseOver: true,
        disableSelection: true,
        autoHeight: true,
        store: store,
        loadMask: true,
        height: 500,
        width: 800,
        renderTo: Ext.getBody(),
        columns: [

        { header: 'Q1',
            sortable: true, dataIndex: 'Q1'
        },
        { header: 'Q2',
            sortable: true, dataIndex: 'Q2'
        },
        { header: 'Q3',
            sortable: true, dataIndex: 'Q3'
        },
        { header: 'Q4',
            sortable: true, dataIndex: 'Q4'
        },
        { header: 'Improvements', flex: 1,
            sortable: true, dataIndex: 'Improvements'
        },
        { header: 'Comments', flex: 1,
            sortable: true, dataIndex: 'Comments'
        }
    ],
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            preprendButtons: true,
            displayMsg: 'Displaying Surveys {0} - {1} of {2}',
            emptyMsg: "No Surveys to display"

        })
    });

这是我的 JSON ......它实际上有 30 条记录,但我把它剪掉了......

  {
  "count": 30,
  "myTable": [
  {
  "Q1": "1",
  "Q2": "1",
  "Q3": "1",
  "Q4": "1",
  "Improvements": "",
  "Comments": "1"
},
{
  "Q1": "3",
  "Q2": "2",
  "Q3": "2",
  "Q4": "2",
  "Improvements": "This is A very long comment. What do you think?",
  "Comments": "Agreed"
},
{
  "Q1": "4",
  "Q2": "2",
  "Q3": "4",
  "Q4": "3",
  "Improvements": "Hello2",
  "Comments": "Hello2"
},
{
  "Q1": "3",
  "Q2": "2",
  "Q3": "2",
  "Q4": "1",
  "Improvements": "Hello4",
  "Comments": "Hello4"
}

] }

另外,如果它有帮助,这就是我获得 Json 的方式

        string sqlquery = "SELECT Q1, Q2, Q3, Q4, Improvements, Comments FROM ITable";
        conn.Open();
        SqlDataAdapter cmd = new SqlDataAdapter(sqlquery, conn);
        SqlCommand comd = new SqlCommand(sqlquery, conn);
        DataSet myData = new DataSet();
        cmd.Fill(myData, "myTable");

        comd.CommandText = "SELECT COUNT(*) FROM ITable";
        Int32 count = (Int32)comd.ExecuteScalar();

        comd.ExecuteNonQuery();
        conn.Close();


        var results = (new

        {

            TotalNumber = count,

            myTable = myData

        });

        return JsonConvert.SerializeObject(new { count=count, myTable = myData.Tables[0] }, Formatting.Indented,
                        new JsonSerializerSettings
                        {
                            ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                        });

我知道我的 Json 是对的……它读取了 30 条记录,因为它说“显示 30 条记录”……我只是不知道我做错了什么……这不可能是浏览器问题……为什么它把所有东西都放在一页上?有人吗?

4

1 回答 1

2

使用分页工具栏时,服务器应该为您分页数据。您不会一次将所有记录都提供给它。

分页工具栏将发送请求每个页面的请求,并且服务器应该只返回该页面的记录。

如果您想使用内存数据进行分页(一次获取所有数据,您必须实现自己的,或使用其中一个扩展。

请参阅http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Paging上的“使用本地数据分页”部分

因此,要按预期使用它,您必须更改服务器代码以考虑startlimitHTTP 参数

于 2012-11-02T21:01:01.400 回答