Ext js grid Initially showing first page records, its's great; but when next page button is clicked, request is going to the Server and server also returning second page data but grid is not showing second page content, its showing first page content only but Page bar showing that we are in second page.
My store is:
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'
}
}
});
My Grid is:
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
});
}
});
}
}
}
});
