问题
My paging bar displays and says Displaying 1 - 5 of 10. But all of the 10 records are being displayed. I can't seem to figure it out.
Here is my List.js file
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'
}
}]
});
And here is my StudentStore.js file
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'
}
}
});
So, any suggestions?
回答1:
You are using two different Stores in your Grid Panel: 1 for the Grid, and 1 for the Paging Toolbar.
In your configuration for the grid/pagingtoolbar you are setting "store: 'StudentStore'", which creates two StudentStores - but two different ones. (You can try to debug into your app and compare the id of the two stores).
The Store of the grid and the pagingbar need to be the identical.
How can you solve the Problem?
1) You can either define the store in the initComponent method of your grid and assign it to the grid and to the toolbar
2) (preferred): you can define the store in the ViewModel and bind the store in the grid and the toolbar:
ViewModel:
...
stores: {
studentStore: {
type: 'studentstore'
}
}
...
Store:
Ext.define('MyApp.store.StudentStore', {
extend: 'Ext.data.Store',
alias: 'store.studentstore',
....
Grid:
...,
collapsible: true,
bind: {
store: '{studentStore}'
},
collapsible: true,
...,
Regards,
回答2:
Finally solved this issue.
Total no. of records are 100. I have set a pageSize: 10 in store. Now first time when grid will be loaded, only 10 records will be displayed. Next time when you go to next page it will show you next 10 records.
There is need to write some server side code to solve this issue.
JS Code -
<!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 (server side code)
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;
}
}
}
}
I have tested almost everything and it's working properly in my system. Just check it and try to add this code in your application. I hope, it will work surely. If you still get any issue, let me know i will solve it out.
来源：https://stackoverflow.com/questions/31743023/paging-not-working-properly-in-extjs