分页在extjs中不能正常工作
Paging not working properly in extjs
分页栏显示并显示显示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'
}
}
});
有什么建议吗?
您在网格面板中使用了两个不同的store:一个用于网格，另一个用于分页工具栏。
在你的grid/pagingtoolbar的配置中，你正在设置"store: 'StudentStore'"，这创建了两个StudentStore -但两个不同的。(你可以试着调试到你的应用程序，比较两个商店的id)。
grid的Store和pagingbar的Store需要相同
你如何解决这个问题?
1)你可以在网格的initComponent方法中定义store，并将其分配给网格和工具栏2)(首选):您可以在ViewModel中定义存储，并将存储绑定到网格和工具栏中:
ViewModel:
...
stores: {
studentStore: {
type: 'studentstore'
}
}
...
存储:
Ext.define('MyApp.store.StudentStore', {
extend: 'Ext.data.Store',
alias: 'store.studentstore',
....
...,
collapsible: true,
bind: {
store: '{studentStore}'
},
collapsible: true,
...,
认为,
终于解决了这个问题。
总没有。有100条记录。我已经将页面大小设置为:10。现在第一次加载网格时，只会显示10条记录。下次当你转到下一页时，它会显示接下来的10条记录。
需要编写一些服务器端代码来解决这个问题。
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(服务器端代码)
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;
}
}
}
}
我已经测试了几乎所有的东西，它在我的系统中工作正常。只需检查它并尝试将此代码添加到应用程序中。我希望，它一定会起作用。如果您还有什么问题，请告诉我，我会解决的。
相关文章：
- Javascript:selenium Web驱动程序isDisplayed(）不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours(）工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 正在尝试使用if和else添加类，但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery）
- JS可以在Chrome中工作，但不能在Firefox中工作
- 最大高度转换不;不工作，工作缓慢
- Gulp-rev:不是第一次工作，而是在第一次工作之后工作
- JQuery - Ajax: encodeUriComponent不工作(EncodeUri工作)
