Javascript ExtJS4.2中的网格分页
我正在开发一个ExtJS应用程序,需要实现分页。所以我有一个表单,它有大约10-15个搜索条件,用户可以根据这两个条件中的任何一个进行搜索。搜索结果可能有100多条记录,我希望以页面形式显示(每页20条记录)。我正在使用Sencha Architect来开发代码。以下是我的店铺的外观:-Javascript ExtJS4.2中的网格分页,javascript,extjs,pagination,sencha-architect,Javascript,Extjs,Pagination,Sencha Architect,我正在开发一个ExtJS应用程序,需要实现分页。所以我有一个表单,它有大约10-15个搜索条件,用户可以根据这两个条件中的任何一个进行搜索。搜索结果可能有100多条记录,我希望以页面形式显示(每页20条记录)。我正在使用Sencha Architect来开发代码。以下是我的店铺的外观:- Ext.define('EmpMain.store.EmpSearchStore', { extend: 'Ext.data.Store', requires: [ '
Ext.define('EmpMain.store.EmpSearchStore', {
extend: 'Ext.data.Store',
requires: [
'EmpMain.model.EmpSearcModel',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'EmpMain.model.EmpSearcModel',
storeId: 'EmpSearchStore',
pageSize: 4,
proxy: {
type: 'jsonp',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalRecords'
}
}
}, cfg)]);
}
});
以下是搜索按钮的处理程序代码:-
var values = this.up('#id_EmpSearchForm').getValues();
//console.log(Ext.JSON.encode(values));
var EmpsearchStore=Ext.getStore('EmpSearchStore'),
EmpMemoryStore=Ext.getStore('EmpMemoryStore'),
records=[];
this.up('#id_EmpSearch').setLoading(true);
console.log("No of records in store before"+EmpsearchStore.getCount());
.request({
url: "http://localhost:19456",
method:"POST",
params : {
EmpData: Ext.JSON.encode(values)
},
scope : this,
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalRecords'
},
//method to call when the request is successful
success:function(response){
response = Ext.decode(response.responseText);
console.log("Total Records"+response.totalRecords);
if(response.success){
//Ext.MessageBox.alert('Success', response.message);
this.up('#id_EmpSearch').setLoading(false);
EmpsearchStore.loadData(response.data);
console.log("No of records in store after"+EmpsearchStore.getCount());
//copy data into memory store
console.log("No of records in Memory store after"+EmpMemoryStore.getCount());
}
else {
Ext.MessageBox.alert('Alert!!', response.message);
this.up('#id_EmpSearch').setLoading(false);
}
},
//method to call when the request is a failure
failure:function(form, result){
Ext.MessageBox.alert('Communication Error', 'Error loading data');
this.up('#id_EmpSearch').setLoading(false);
}
});
由于某些原因,分页不起作用。有人能帮我吗?我做错了什么?
这是我的JSOn响应
{
"data": [{
"Emp_ID": "1000451",
"TPC_COND_ID": "35816",
"TPC_CONDUIT_NAME": "TPC_JMS_ETM_ALL",
"TPC_CHAN_ID": "35818",
"TPC_CHANNEL_NAME": "TPC_JMS_ETM204_ALL",
"ABC_SEND_ID": "65696",
"ABC_SENDER": "0279639200002",
},
{
"Emp_ID": "1002370",
"TPC_COND_ID": "11098",
"TPC_CONDUIT_NAME": "MQ_02",
"TPC_CHAN_ID": "13148",
"TPC_CHANNEL_NAME": "MQ_INBOUND_PASS_THRU",
"ABC_SEND_ID": "39300",
"ABC_SENDER": "FLNAHVL",
}],
"success": true,
"totalRecords": 50
}
这是我的网格和工具栏配置
xtype: 'gridpanel',
autoRender: true,
height: 500,
id: 'id_EmpResultGrid',
autoScroll: true,
header: false,
title: 'Emp Search Results',
scroll: 'vertical',
store: 'EmpSearchStore',
viewConfig: {
preserveScrollOnRefresh: true,
enableTextSelection: true
},
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
store: 'TPPSearchStore'
}
]
“怎么”不起作用?您应该提供以下几个细节:1.)网格是否加载了数据?2.)如果是,是您期望的数据吗?3.)您的JSONP响应是什么样子的?4.)您的回复中记录的数量是否正确?5.)您的回复是否具有商店可用于了解如何分页的总结果大小?6.)根据您所说的,您的“页面大小”是错误的…当前为“4”,但如果您希望页面数为20,则应为20。请记住:您应全权负责为存储提供正确的数据。商店对你的远程数据毫无头绪,所以你让它做什么它就做什么。如果您没有在每个“页面”返回正确的记录集,网格存储区只能处理您告诉它的任何数据。99%的人的远程分页问题与他们的Ext JS配置无关,而是与没有从服务器正确返回数据有关。要回答第一个问题,分页不起作用。网格正在加载记录,服务器也正在返回totalRecords。我已经在问题中添加了我的JSON响应,但它“如何”不起作用?不归还记录?返回相同的记录?抛出错误?分页工具栏中的箭头不起作用。(它们被禁用)同时显示已加载的0条记录(共0条记录)