Ext js grid最初显示第一页记录，它很棒;但是当单击下一页按钮时，请求将转到服务器和服务器也返回第二页数据，但网格不显示第二页内容，它仅显示第一页内容，但显示我们在第二页的页栏。
我的商店是：
Ext.define('CustomCMS.store.RolesPagination', {
extend: 'Ext.data.Store',
id: 'rolePaginationInfo',
storeId: 'rolePaginationInfo',
enablePaging: true,
alias: 'store.rolesPagination',
autoLoad: { start: 0, limit: 2 },
queryModel: 'query',
pageSize: 2,
remoteSort: true,
sorters: [{
property: 'RName',
direction: 'asc'
}],
fields: ['RId', 'RName', 'RDesc', 'RIsRead', 'RISCreate', 'RISUpdate', 'RIsDelete', 'RISActive'],
idProperty: 'RId',
proxy: {
type: 'ajax',
url: 'http://localhost:51157/ProductService.svc/' + 'RetriveRoleswithPagination',
reader: {
type: 'json',
rootProperty: 'RetriveRoleswithPaginationResult.RolesDetails',
totalProperty: 'RetriveRoleswithPaginationResult.total'
}
}
});
我的网格是：
Ext.define('CustomCMS.view.roles.Roles', {
extend: 'Ext.grid.Panel',
xtype: 'roleslist',
id: 'rolesgrid',
alias: 'rolesgrid',
disableSelection: true,
loadMask: true,
requires: [
'CustomCMS.store.Roles'
],
title: 'Roles',
store: {
type: 'rolesPagination'
},
tbar: [{
text: 'Add Role',
action: 'add',
iconCls: 'book-add',
handler: function () {
Ext.create('RoleOp', { action: 'A' }).setVisible(true);
}
},
{
text: 'Remove Role',
action: 'edit',
itemId: 'rempoverole',
disabled: true,
handler: function () {
var grid = Ext.getCmp("rolesgrid");
if (grid) {
var sm = grid.getSelectionModel();
var rs = sm.getSelection();
if (!rs.length) {
Ext.Msg.alert('Info', 'No Employees are Selected');
return;
}
Ext.Msg.confirm('Remove Employee',
'Are you sure you want to delete?',
function (button) {
if (button == 'yes') {
//alert(rs[0].data.EId);
Ext.Ajax.request
({
url: 'http://localhost:51157/ProductService.svc/' + '/RemoveRole/' + rs[0].data.RId,
method: 'GET',
success: function (response, opts) {
var res = eval('(' + response.responseText + ')');
if (res.RemoveRoleResult == "1") {
Ext.Msg.alert('Status', 'Role Deleted Sucessfully');
//window.location.href = 'http://localhost:49393/';
var grid = Ext.getCmp('rolesgrid');
grid.getStore().load();
}
},
failure: function (response, opts) {
},
scope: this
//jsonData: Student
});
// grid.store.remove(rs[0]);
}
});
}
}
}
],
columns: [
{ text: '#Id', dataIndex: 'RId' },
{ text: 'Name', dataIndex: 'RName', flex: 1 },
{ text: 'Description', dataIndex: 'RDesc', flex: 1 },
{ text: 'IsRead', dataIndex: 'RIsRead', flex: 1 },
{ text: 'IsCreate', dataIndex: 'RISCreate', flex: 1 },
{ text: 'IsUpdate', dataIndex: 'RISUpdate', flex: 1 },
{ text: 'IsDelete', dataIndex: 'RIsDelete', flex: 1 },
{ text: 'Status', dataIndex: 'RISActive', flex: 1 },
{
header: 'Test Column',
dataIndex: 'RISActive',
renderer: function (value, metaData, record) {
if (value == "Active") {
return '<span style="background-color:green;padding:15px;border-radius:8px;color:white">Active</span>'
}
else {
return '<span style="background-color:red;padding:15px;border-radius:8px;color:white">Inactive</span>'
}
}
},
{
text: 'Actions',
xtype: 'actioncolumn',
align: 'center',
items: [{
icon: 'images/book_edit.png',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var RoleId = rec.get('RId');
Ext.Msg.confirm('Edit Employee',
'Are you sure you want to Edit?',
function (button) {
if (button == 'yes') {
//alert(rs[0].data.EId);
Ext.Ajax.request
({
url: 'http://localhost:51157/ProductService.svc/' + 'RetriveRoleById/' + RoleId,
method: 'GET',
success: function (response, opts) {
var employee = eval('(' + response.responseText + ')');
Ext.create('RoleOp', { action: 'U' }).setVisible(true);
Ext.getCmp('txtRId').setValue(employee.RetriveRoleByIdResult.RId);
Ext.getCmp('txtName').setValue(employee.RetriveRoleByIdResult.RName);
Ext.getCmp('txtDesc').setValue(employee.RetriveRoleByIdResult.RDesc);
Ext.getCmp('chkIsRead').setValue(employee.RetriveRoleByIdResult.RIsRead == "Y" ? true : false);
Ext.getCmp('chkIsCreate').setValue(employee.RetriveRoleByIdResult.RISCreate == "Y" ? true : false);
Ext.getCmp('chkIsUpdate').setValue(employee.RetriveRoleByIdResult.RISUpdate == "Y" ? true : false);
Ext.getCmp('chkIsDelete').setValue(employee.RetriveRoleByIdResult.RIsDelete == "Y" ? true : false);
Ext.getCmp('chkIsActive').setValue(employee.RetriveRoleByIdResult.RISActive == "Y" ? true : false);
},
failure: function (response, opts) {
},
scope: this
//jsonData: Student
});
}
});
}
}, {
icon: 'images/book_delete.png',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var RoleId = rec.get('RId');
if (RoleId != '') {
Ext.Msg.confirm('Remove Employee',
'Are you sure you want to delete?',
function (button) {
if (button == 'yes') {
Ext.Ajax.request
({
url: 'http://localhost:51157/ProductService.svc/' + '/RemoveRole/' + RoleId,
method: 'GET',
success: function (response, opts) {
var res = eval('(' + response.responseText + ')');
if (res.RemoveRoleResult == "1") {
Ext.Msg.alert('Status', 'Role Deleted Sucessfully');
//window.location.href = 'http://localhost:49393/';
var grid = Ext.getCmp('rolesgrid');
grid.getStore().load();
}
},
failure: function (response, opts) {
},
scope: this
//jsonData: Student
});
// grid.store.remove(rs[0]);
}
});
}
}
}]
}
],
bbar: [{
xtype: 'pagingtoolbar',
pageSize: '2',
store: {
type: 'rolesPagination'
},
dock: 'bottom',
displayInfo: true,
listeners:
{
beforechange: function (pagingtoolbar, page, eOpts) {
//alert('I am');
alert(page);
//Ext.getCmp('rolesPaginationGrid').getStore().load({
// params: { start: 2, limit: 2 }, callback: function (records, op, ds) {
// }});
}
}
//items: [
// '-', {
// pressed: true,
// enableToggle: true,
// text: 'Show Preview',
// cls: 'x-btn-text-icon details',
// toggleHandler: function (btn, pressed) {
// var view = grid.getView();
// view.showPreview = pressed;
// view.refresh();
// }
// }]
}],
//buttonClicked:function (grid, rowIndex, colIndex) {
// var rec = grid.getStore().getAt(rowIndex);
// Ext.Msg.alert("Info", "name " + rec.get('RId'));
//},
listeners: {
//select: 'onItemSelected'
'selectionchange': function (view, records) {
var grid = Ext.getCmp("rolesgrid");
grid.down('#rempoverole').setDisabled(!records.length);
},
'itemdblclick': function () {
var grid = Ext.getCmp("rolesgrid");
if (grid) {
var sm = grid.getSelectionModel();
var rs = sm.getSelection();
if (!rs.length) {
Ext.Msg.alert('Info', 'No Employees are Selected');
return;
}
Ext.Msg.confirm('Edit Employee',
'Are you sure you want to Edit?',
function (button) {
if (button == 'yes') {
//alert(rs[0].data.EId);
Ext.Ajax.request
({
url: 'http://localhost:51157/ProductService.svc/' + 'RetriveRoleById/' + rs[0].data.RId,
method: 'GET',
success: function (response, opts) {
var employee = eval('(' + response.responseText + ')');
Ext.create('RoleOp', { action: 'U' }).setVisible(true);
Ext.getCmp('txtRId').setValue(employee.RetriveRoleByIdResult.RId);
Ext.getCmp('txtName').setValue(employee.RetriveRoleByIdResult.RName);
Ext.getCmp('txtDesc').setValue(employee.RetriveRoleByIdResult.RDesc);
Ext.getCmp('chkIsRead').setValue(employee.RetriveRoleByIdResult.RIsRead == "Y" ? true : false);
Ext.getCmp('chkIsCreate').setValue(employee.RetriveRoleByIdResult.RISCreate == "Y" ? true : false);
Ext.getCmp('chkIsUpdate').setValue(employee.RetriveRoleByIdResult.RISUpdate == "Y" ? true : false);
Ext.getCmp('chkIsDelete').setValue(employee.RetriveRoleByIdResult.RIsDelete == "Y" ? true : false);
Ext.getCmp('chkIsActive').setValue(employee.RetriveRoleByIdResult.RISActive == "Y" ? true : false);
},
failure: function (response, opts) {
},
scope: this
//jsonData: Student
});
}
});
}
}
}
});