PDA

View Full Version : Pagination issue



Vijayasaharan
22 Oct 2012, 4:33 PM
Hi I am having trouble with the pagination where the paging bar always show page 1-1, i am getting only the needed records from database but i am sending the totalCount property but still its not displaying the total page count properly.

Also how to send extra parameters when user clicks on next button or clicks on sort.

Here is my code


var episodeModel = Ext.define('EpisodeModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'ID', type: 'string' }, { name: 'Name', type: 'string' },
{ name: 'ShowName', type: 'string' }, { name: 'ShowID', type: 'string' }
]
});
var itemsPerPage = 20;
var episodeParams = { 'showID': projID, start: 0, limit: itemsPerPage, direction: 'ASC' };

var dataEpisodeStore = Ext.create('Ext.data.JsonStore', {
id: 'episodeStore',
pageSize: itemsPerPage, // items per page
proxy: {
type: 'ajax',
model: episodeModel,
method: 'POST',
//enablePaging: true,
headers: { 'Content-Type': 'application/json;charset=utf-8' },
url: 'Service.svc/GetEpisodesforShow',
actionMethods: { create: 'POST', read: 'POST', update: 'POST', destroy: 'POST' },
reader: {
type: 'json',
root: 'GetEpisodesforShowResult',
totalProperty: 'TotalRecords'
}
}
});

dataEpisodeStore.load({ params: Ext.encode(episodeParams),
callback: function (records, operation, success) {
var showName = records[0].data.ShowName;
DisplayBreadCrumps(showName, null, null);
}
});
Ext.get('EpisodeGrid').update('');
myEpisodeGrid = null;
myEpisodeGrid = Ext.create('Ext.grid.Panel', {
//cls: 'assetGrid',
store: dataEpisodeStore,
layout: {
type: 'vbox',
align: 'left'
},
disableSelection: true,
columns: [
//{ xtype: 'rownumberer', flex: 0.0 },
{header: "ID", dataIndex: "ID", sortable: false, hidden: true },
{ header: "TITLE", flex: 5.2, dataIndex: "Name", tdCls: "episodeColumn", sortable: true },

{ header: "ShowName", dataIndex: "ShowName", sortable: false, hidden: true },
{ header: "ShowID", dataIndex: "ShowID", sortable: false, hidden: true },
{ header: "", flex: 0.4, text: "", sortable: false }
],
plugins: [{
ptype: 'rowexpander',
pluginId: 'episodeplugin',
rowBodyTpl: ['<div id=EpisodeGrid{ID}> </div>'],
toggleRow: function (rowIdx) { toggleRowAssetGrid(rowIdx, projID); }
}],
listeners: {
itemclick: function (dataview, metaData, index, item, e, record, rowIndex) {
DisplayBreadCrumps(null, metaData.data.Name, null);
myEpisodeGrid.getView().addRowCls(index, 'episodeSelected');
toggleRowAssetGrid(index, projID);
}
},
collapsible: false,
animCollapse: false,
stripeRows: true,
width: 940,
height:800,
// paging bar on the bottom
dockedItems: [{
xtype: 'pagingtoolbar',
store: dataEpisodeStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: 'EpisodeGrid'
});
}

skirtle
22 Oct 2012, 6:55 PM
Please use [CODE] tags when posting code.

To add the parameters to all subsequent requests you need to add them to the extraParams rather than passing them to load directly. e.g.:


store.getProxy().setExtraParam('showID', projID);

It's not immediately clear why your paging toolbar isn't working. Could you post a sample of the JSON returned by the server?

Vijayasaharan
22 Oct 2012, 8:11 PM
Thanks for your reply, that was my first post will follow the
ethics :-)
Correct me if I am wrong:
My WCF accepts JSON and extraParams isnt sending as JSON, my grid with no pagination works ok, but for paginations to work I would need extraParams for sending extra paramaters and i wasnt able to find a way to send those params as JSON,it goes as
showID=4&direction=ASC&page=1&start=0&limit=20 , but it should be
{"showID":4,"page":1,"start":0,"limit":20,"direction":"ASC"}

here is my JSON result


[CODE]{"GetEpisodesforShowResult":[{"Count":0,"ID":129455,"Name":"20 Most Outrageous Moments","ShowID":4,"ShowName":"Bravo Programming","TotalRecords":185},{"Count":0,"ID":10841,"Name":"A.S.S.S.S.C.A.T Improve","ShowID":4,"ShowName":"Bravo Programming","TotalRecords":185},{"Count":0,"ID":122436,"Name":"Ad Sales Reels","ShowID":4,"ShowName":"Bravo Programming","TotalRecords":185}, ...


also i found that my store didnt have the totalrecords define, i defined as follows but i still have the same issue



var episodeModel = Ext.define('EpisodeModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'ID', type: 'string' }, { name: 'Name', type: 'string' },
{ name: 'ShowName', type: 'string' }, { name: 'ShowID', type: 'string' },
{ name: 'TotalRecords', type: 'int' }
]
});

skirtle
22 Oct 2012, 9:23 PM
The total shouldn't be inside the record data, it should be separate, like this:


{"TotalRecords":185,"GetEpisodesforShowResult":[...]}

If you need to JSONify the request parameters I'd suggest writing a custom proxy and overriding buildRequest.


Ext.define('MyApp.Proxy', {
alias: 'proxy.myproxy',
extend: 'Ext.data.proxy.Json',

buildRequest: function(operation) {
var request = this.callParent(arguments);

// Adjust as required
request.jsonData = request.params;
request.params = {};

// Maybe just this instead?
//request.params = Ext.encode(request.params);

return request;
}
});

It is buildRequest's responsibility to map the operation to a request. Doing it this way your paging will still work beyond the first page.

To use the custom proxy you'd use the alias:


proxy: {
type: 'myproxy',
...
}

skirtle
22 Oct 2012, 9:29 PM
Also...

Change JsonStore to just Store.

You should specify the model on the store, not the reader, and specify it as a string of the class name:


var dataEpisodeStore = Ext.create('Ext.data.Store', {
id: 'episodeStore',
model: 'EpisodeModel',
pageSize: itemsPerPage,
...

Vijayasaharan
23 Oct 2012, 8:56 AM
I think i am kind of messed up,,
I tried changing my WCF to returnTotalrecords as a seperate entiry and i got something like this


{"GetEpisodesforShowResult":{"Data":[{"Count":0,"ID":129455,"Name":"20 Most Outrageous Moments","ShowID":4,"ShowName":"Bravo Programming","TotalRecords":null},{"Count":0,"ID":136895,"Name":"Brian Atwood","ShowID":4,"ShowName":"Bravo Programming","TotalRecords":null}],"TotalRecords":185}}

So i think i tried changing my model now as my grid isnt getting populated , i made the following changes to the store,

var dataEpisodeStore = Ext.create('Ext.data.Store', {
id: 'episodeStore',
model: 'EpisodeMainModel',
pageSize: itemsPerPage, // items per page
proxy: {
type: 'ajax',
method: 'POST',
extraParams: { 'showID': projID,'direction': 'ASC' },
//enablePaging: true,
headers: { 'Content-Type': 'application/json;charset=utf-8' },
url: 'ViewerServices.svc/GetEpisodesforShow',
actionMethods: { create: 'POST', read: 'POST', update: 'POST', destroy: 'POST' },
reader: {
type: 'json',
root: 'GetEpisodesforShowResult',
record: 'data',
totalProperty: 'TotalRecords'
}
}
});

and model to
var episodeMainModel = Ext.define('EpisodeMainModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'TotalRecords', type: 'int' },
'data']
});

var episodeModel = Ext.define('EpisodeModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'ID', type: 'string' }, { name: 'Name', type: 'string' },
{ name: 'ShowName', type: 'string' }, { name: 'ShowID', type: 'string' },
{ name: 'TotalRecords', type: 'int' }
]
});

skirtle
23 Oct 2012, 9:05 AM
If you want to read this data:


{"GetEpisodesforShowResult":{"Data":[...],"TotalRecords":185}}

you need:


reader: {
type: 'json',
root: 'GetEpisodesforShowResult.Data',
totalProperty: 'GetEpisodesforShowResult.TotalRecords'
}

Vijayasaharan
23 Oct 2012, 10:10 AM
Thanks Skirtle , got the page number to work, for the click event i tried adding the Myproxy but i get this

/Scripts/src/data/proxy/Json.js not found, i didnt find a JSON.js but a JSONP.JS am i missing something here.

skirtle
23 Oct 2012, 10:33 AM
My mistake, it should have been Ajax, not Json. I'm just extending the proxy you were already using:


Ext.define('MyApp.Proxy', {
alias: 'proxy.myproxy',
extend: 'Ext.data.proxy.Ajax',

Vijayasaharan
23 Oct 2012, 10:41 AM
Great It works, thanks a Ton. I can now breath easy and hit my target Thanks

britirie
2 Jul 2013, 11:12 AM
I just want to load let say 300 records from my AJAX/Json call and display 30 per page BUT when I click the column headers I want it to sort ALL records and not just the 30/curent records on page.

I cannot do remoteSort at this time.

I've been struggling for months and managers are requesting that it has to work that way...

var auditStore = Ext.create('Ext.data.Store', {
autoDestroy: true,
autoSync: true,
proxy: {
type: 'ajax',
url: 'AuditViewRpt2.cgi',
reader: {
type: 'json',
root: 'data',
totalProperty : 'total',
successProperty: 'success',
messageProperty: 'message'
}
},
pageSize: 30,
model: 'AuditModel',
sorters: [{
property: 'createDate',
direction: 'ASC'
}]
});

var searchResultGrid = Ext.create('Ext.grid.Panel', {
id:'auditGrid',
border: true,
store: auditStore,
autoHeight: true,
region: 'center',
title:'Audit View Report Result',
frame:true,
viewConfig: {
stripRows: true,
forceFit: true,
loadMask: true,
deferEmptyText: false,
height: 500,
},
columns: [
//{ xtype: 'rownumberer'},
new Ext.ux.grid.PagingRowNumberer(),
{
text: 'Create Date',
dataIndex: 'createDate',
renderer: Ext.util.Format.dateRenderer('m/d/Y H:s'),
width: 100,
fixed: true
},
{
text: 'Class',
dataIndex: 'class',
hidden: isHideClass,
width: 70
},
{
text: 'Event',
dataIndex: 'event',
width: 110
},
{
text: 'Scheduler',
dataIndex: 'scheduler',
hidden: isHideSched,
width: 150
},
{
text: 'Crew Class',
dataIndex: 'crewClass',
width: 110
},
{
text: 'Brief',
dataIndex: 'brief',
width: 150
},
{
text: 'Detail Description',
columns: [{
dataIndex: 'detail',
//flex:1,
width:300,
align:'left',
//resizable: false,
sortable: false,
fixed: true
},{
itemId: 'moreText',
//width:20,
flex: 1,
xtype: 'actioncolumn',
dataIndex: 'moreText',
sortable: false,
resizable: false,
align: 'left',
menuDisabled: true,
getClass: this.getClass,
items: [{
//icon: '../Styles/ext42/themes/images/default/toolbar/more.gif',
iconCls: 'more',
handler: function(grid, rowIndex, colIndex) {
var rec = auditStore.getAt(rowIndex);
var detail=rec.get('detail');
if(detail.length > 50) {
var descSplit = detail.split(";");
var mesg='Additional Details...' + '\n\n';

for(i=0; i< (descSplit.length-1); i++) {
mesg = mesg + descSplit[i] + '\n';
}
alert(mesg);
}
},
getClass: function (val, meta, rec) {
var desc = rec.get('detail');
if (desc.length > 50) {
meta.tdAttr = 'data-qtip=More...';
return 'more';
}
else {
this.tooltip = '';
return 'none';
}
}

}]
}]
}
],
features: [filters],
dockedItems:[{
xtype: 'pagingtoolbar',
store:auditStore,
dock: 'bottom',
displayInfo: true
}]
});

JSON Data
{success:true,total:1,message:'successful',
data:[{"createDate":"06/21/2013 08:57","class":"System","event":"Update AL options","scheduler":"","crewClass":"--","brief":"","detail":"airoptchange=1;opt=`ALO_BIDDING_OPEN_NOTIFICATION`;old=``;new=`T`;by=`999999`;byname=`Scheduler, Crew`;"}
]}