0

我的分页栏显示并显示正在显示 1 - 5 of 10。但所有 10 条记录都在显示。我似乎无法弄清楚。

这是我的 List.js 文件

Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',

require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
    type: 'vbox',
    align: 'stretch'
},

reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
    { 
        text: 'Name', 
        dataIndex: 'name',
        flex: 1 
    },

    { 
        text: 'Address', 
        dataIndex: 'address', 
        flex: 1 
    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1
    },
    { 
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    },
    { 
        text: 'Faculty',
        dataIndex:'faculty',
        flex: 1
    }
],

dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {
                xtype: 'button',
                text: 'Add',
                iconCls: 'fa fa-plus',
                listeners: {
                click: 'onAdd'
            }
            },
            {
                xtype: 'button',
                text: 'Edit',
                iconCls: 'fa fa-edit',
                id: 'editButton',
                bind: {
                    disabled: '{ !mainList.selection }'
                },
                listeners: {
                   click: 'onEdit'
                }
            },
            {
                xtype: 'button',
                text: 'Delete',
                iconCls: 'fa fa-trash-o',
                bind: {
                    disabled: '{ !mainlist.selection }'
                },
                listeners: {
                    click: 'onDelete'
                }
            }]
        },
        {
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            displayInfo: true,
            store: 'StudentStore'
        }
    ],
// toolbar for our store filter field
tbar: [{
    xtype: 'textfield',
    fieldLabel: 'Search Student',
    emptyText: '...type to filter',
    width: 300,
    listeners: {
        change: 'onSearch'
    }
}]
});

这是我的 StudentStore.js 文件

Ext.define('MyApp.store.StudentStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Student',
sorters: ['name'],
autoLoad: true,
pageSize: 5,
autoSync: false,
proxy: {
    method: 'GET',
    type: 'ajax',
    url: 'http://localhost:8080/extServlet/StudentController?action=listStudent',
    reader: {
        type: 'json',
        rootProperty: 'StudentStore',
        totalProperty: 'total'
    }
}
});

那么，有什么建议吗？

4

2 回答 2

0

终于解决了这个问题。

总数 记录数为 100。我在商店中设置了 pageSize: 10。现在第一次加载网格时，只会显示 10 条记录。下次当您转到下一页时，它将显示接下来的 10 条记录。

需要编写一些服务器端代码来解决这个问题。

JS代码 -

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Libraries/ext-all.js"></script>
    <script src="Libraries/ext-all-debug.js"></script>
    <link href="Libraries/ext-theme-crisp-all-debug.css" rel="stylesheet" />
    <script type="text/javascript">

        Ext.onReady(function () {
            var studentStore = Ext.create('Ext.data.Store',
                {
                    autoLoad: true,
                    pageSize: 10,
                    fields: ['ID', 'Invoice', 'Date', 'Vendor', 'ProductCode', 'ClientNumber', 'ClientName', 'Amount', 'Type'],
                    proxy:
                    {
                        type: 'ajax',
                        url: 'Handler2.ashx',
                        actionMethods: {
                            read: 'POST'
                        },
                        reader: {
                            type: 'json',
                            root: 'data',
                            totalProperty: 'total'
                        }
                    }
                });
            var window = new Ext.Window({
                id: 'grdWindow',
                width: 400,
                title: 'Grid Samples',
                items: [
                    {
                        xtype: 'panel',
                        layout: 'fit',
                        renderTo: Ext.getBody(),
                        items: [
                            {
                                xtype: 'grid',
                                id: 'grdSample',
                                height: 300,
                                store: studentStore,
                                    columns: [
                                    {
                                        header: 'Name',
                                        dataIndex: 'Name',
                                    },
                                    {
                                        header: 'Age',
                                        dataIndex: 'Age'
                                    },
                                    {
                                        header: 'Fee',
                                        dataIndex: 'Fee'
                                    }
                                    ],
                                    dockedItems:
                                        [   
                                            {
                                                xtype: 'pagingtoolbar',
                                                store:studentStore,
                                                dock:'bottom',
                                                displayInfo:true
                                            }
                                        ]
                            }
                        ]
                    }
                ]
            }).show();
        });
    </script>
</head>
<body>

</body>
</html>

Handler2.ashx.cs（服务器端代码）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
namespace InsertionByExtJS
{
    /// <summary>
    /// Summary description for Handler2
    /// </summary>
    public class Handler2 : IHttpHandler
    {
        public int Id {get; set;}
        public String Invoice { get; set; }
        public String Date { get; set; }
        public String Vendor { get; set; }
        public String ProductCode { get; set; }
        public String ClientNumber { get; set; }
        public String ClientName { get; set; }
        public String Amount { get; set; }
        public String Type { get; set; }
        public String Name { get; set; }
        public String Profile { get; set; }
        public String Email { get; set; }

        List<Handler2> ListData;

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            ListData = new List<Handler2>();
            int i = 100;
            int j = 1;
            while (j <= i)
            {
                ListData.Add(new Handler2 { Name = "Puneet" + j, Profile = "Puneet" + j, Email = "Email" });
                j++;
            }

            string start1 = context.Request["start"];
            string limit1 = context.Request["limit"];

            int start = Convert.ToInt32(start1);
            int limit = Convert.ToInt32(limit1);


            List<Handler2> range = ListData.GetRange(start, limit);
            JavaScriptSerializer JSS = new JavaScriptSerializer();
            string result;

            result = string.Format("{{total:{1},'data':{0}}}", JSS.Serialize(range), ListData.Count);
            context.Response.Write(result);

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

我已经测试了几乎所有东西，并且它在我的系统中正常工作。只需检查它并尝试在您的应用程序中添加此代码。我希望，它一定会奏效。如果您仍然遇到任何问题，请告诉我，我会解决的。

于 2015-08-01T07:12:45.043 回答
0

您在网格面板中使用了两个不同的商店：1 个用于网格，1 个用于分页工具栏。

在您对网格/分页工具栏的配置中，您正在设置“商店：'StudentStore'”，它创建了两个 StudentStores - 但两个不同的。（您可以尝试调试到您的应用程序并比较两个商店的 id）。

网格和分页栏的存储需要相同。

您如何解决问题？

1）您可以在网格的 initComponent 方法中定义存储并将其分配给网格和工具栏

2）（首选）：可以在ViewModel中定义store，在grid和toolbar中绑定store：

视图模型：

...
stores: {
    studentStore: {
        type: 'studentstore'
    }
}
...

店铺：

Ext.define('MyApp.store.StudentStore', {
    extend: 'Ext.data.Store',
    alias: 'store.studentstore',
    ....

网格：

...,
collapsible: true,
bind: {
    store: '{studentStore}'
},
collapsible: true,
...,

问候，

于 2015-07-31T15:19:46.183 回答