PagingToolBar Problem w/ JSON w/ POST w/ ExtJS 2.2
I am a new newbie for ExtJS and start to use this for development. I hit a problem which made me puzzle over a week, i search over the forum and Google seem no luck of it. I hope sbody can give me some suggestion on it. ;)
JavaScript Code
var pageSize = 5;
function fnFormatDate(v,p,r) {
return Ext.util.Format.date(v,"Y-m-d H:i:s");
}
function fnActiveUser(v,p,r){
if (v=="1") {
return "Active";
} else {
return "Suspend";
}
}
var record = new Ext.data.Record.create([
{name: "USER_ID", type: "int", mapping: "USER_ID"},
{name: "USER_LOGIN", type: "string", mapping: "USER_LOGIN"},
{name: "USER_NAME", type: "string", mapping: "USER_NAME"},
{name: "USER_GRADE", type: "string", mapping: "USER_GRADE"},
{name: "USER_UNIT", type: "string", mapping: "USER_UNIT"},
{name: "ACTIVE_FLAG", type: "int", mapping: "ACTIVE_FLAG"},
{name: "LAST_SIGNON", type: "date", mapping: "LAST_SIGNON", dateFormat: "Y-m-d H:i:s"}
]);
var reader = new Ext.data.JsonReader({
totalProperty: "results",
root: "row",
id: "USER_ID"
}, record);
var ds = new Ext.data.Store({
reader: reader,
baseParams: {type: "json"},
remoteSort: true,
url: contextPath + "/cmwsUserAdminServlet"
});
ds.setDefaultSort('USER_ID','asc');
var cm = new Ext.grid.ColumnModel([
{header: message[0][0], width: 20, dataIndex: "USER_ID"},
{header: message[0][1], width: 20, dataIndex: "USER_LOGIN"},
{header: message[0][2], width: 30, dataIndex: "USER_NAME"},
{header: message[0][3], width: 50, dataIndex: "USER_GRADE"},
{header: message[0][4], width: 50, dataIndex: "USER_UNIT"},
{header: message[0][5], width: 50, dataIndex: "ACTIVE_FLAG"},
{header: message[0][6], width: 50, dataIndex: "LAST_SIGNON"}
]);
cm.defaultSortable = true;
cm.setRenderer(5,fnActiveUser);
cm.setRenderer(6,fnFormatDate);
//
pagingBar = new Ext.PagingToolbar({
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
store: ds,
pageSize: pageSize,
emptyMsg: "No topics to display",
//
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();
}
}]
});
var grid = new Ext.grid.GridPanel({
cm: cm, store: ds, bbar: pagingBar,
loadMask: true, id: "grid-userAdmin",
border: true, frame: true, autoSizeColumns: true, trackMouseOver:true,
el: "user-admin-grid", collapsible: false, // autoHeight: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
height: 300, width: "80%",
viewConfig: { forceFit:true }
});
grid.render();
//
ds.load({
params:{start: 0, limit: pageSize},
callback:function(r, options, success){
alert(ds.getTotalCount());
}
});
Here is the JSON post data
{"row":[{"LAST_SIGNON":"2008-08-10 01:40:48.773","ACTIVE_FLAG":1,"USER_UNIT":"ISU Unit","USER_ID":2,"USER_LOGIN":"neville","USER_GRADE":"CAP(TCM)","USER_NAME":"Neville Man"},{"LAST_SIGNON":"2008-07-23 09:53:32.567","ACTIVE_FLAG":1,"USER_UNIT":"Shroff","USER_ID":10,"USER_LOGIN":"SS2","USER_GRADE":"D(TCM)","USER_NAME":"Chan Tin-Chi"},{"LAST_SIGNON":"2006-11-23 09:05:33.723","ACTIVE_FLAG":1,"USER_UNIT":"Shroff","USER_ID":11,"USER_LOGIN":"SS3","USER_GRADE":"AA(TCM)","USER_NAME":"Sam Leung"},{"LAST_SIGNON":"2007-10-31 14:12:00.56","ACTIVE_FLAG":1,"USER_UNIT":"Shroff","USER_ID":12,"USER_LOGIN":"SS4","USER_GRADE":"RS(TCM)","USER_NAME":"Alice Liu"},{"LAST_SIGNON":"2006-10-26 12:04:08.427","ACTIVE_FLAG":1,"USER_UNIT":"PR Unit","USER_ID":13,"USER_LOGIN":"SPPR","USER_GRADE":"SP(TCM)","USER_NAME":"Pamela Li"},{"LAST_SIGNON":"2006-09-29 09:16:32.09","ACTIVE_FLAG":1,"USER_UNIT":"Shroff","USER_ID":14,"USER_LOGIN":"SO2","USER_GRADE":"RA(TCM)","USER_NAME":"Desmond Wong"},{"LAST_SIGNON":null,"ACTIVE_FLAG":1,"USER_UNIT":"Shroff","USER_ID":15,"USER_LOGIN":"SO3","USER_GRADE":"RA(TCM)","USER_NAME":"Vicky Lo"},{"LAST_SIGNON":"2008-07-31 12:37:55.477","ACTIVE_FLAG":1,"USER_UNIT":"IL Unit","USER_ID":16,"USER_LOGIN":"RS2","USER_GRADE":"RS(TCM)","USER_NAME":"Isabella Choi"},{"LAST_SIGNON":"2006-11-28 08:44:17.49","ACTIVE_FLAG":1,"USER_UNIT":"PR Unit","USER_ID":17,"USER_LOGIN":"RS3","USER_GRADE":"RS(TCM)","USER_NAME":"Liu Ming-Chu, Alice"},{"LAST_SIGNON":"2008-07-24 12:35:09.813","ACTIVE_FLAG":1,"USER_UNIT":"PR Unit","USER_ID":18,"USER_LOGIN":"PPR8","USER_GRADE":"P(TCM)","USER_NAME":"Ng Yui-Hong, Jonathan"}],"results":10}
Sorry for a bit of long question.
Question:
8653
1) The lower right bottom corner show "Displaying topics 1 - 10 of 10" , it should be "Displaying topics 1 - 5 of 10" instead. How to fix it ?! I copy the code from the ExtJS example, the example works but dunno why mime one is not working. Strange !! :-/
8654
2) same problem also appear when i click "next page", the number keep on increment :s:s:((
Browser: Firefox 3.0 with Firebugs
Data Passing: via JSON
Any help should be greatly appreciate.
Thx !
10.
If you specified something like
var pageSize = 5;Then your server should look for that in the packet it receives (in POST for example) and use that to prepare the query so it returns only 5 records.
Again, this is all outlined with example and in more detail in the Grid FAQ in my signature.
For some reason should you want to send all data at once and then page using local data, then you need to use Paging Memory Proxy.
Sth want to clarify:
1) i already limit total records return to 10
2) i already set the pagesize to 5
but, the PagingToolbar still display the count from (1-10 of 10) instead of (1-5 of 10).
I will check for the PagingMemoryProxy first. Thx for your suggestion.
Your current logic only works with Paging Memory Proxy. Most (?) people will return 5 records.
Several threads on this around.
Sorry for my newbie question. That's mean the data retrieval still managed by the back-end server instead of the ExtJS ?! The reason i ask for this because i use displayTag before to display the content, which accept the whole set of the data and then it process internally. So i got a impression ExtJS also do the same thing ;)
Seem i should check for the Paging Memory Proxy. Thx for your help. !
10.
If you specified something like
var pageSize = 5;
Then your server should look for that in the packet it receives (in POST for example) and use that to prepare the query so it returns only 5 records.
Again, this is all outlined with example and in more detail in the Grid FAQ in my signature.
For some reason should you want to send all data at once and then page using local data, then you need to use Paging Memory Proxy.
I am facing the same pagination problem.
I can see the paging toolbar at the bottom of grid.
Even page number displayed at the paging tool bar is also correct but on the every page I select I can see all the data that is present in the store,
I am using JSON file as a source of data and proxy is HttpProxy.
Please help and provide me solution for the above problem.
Thanks for ur valuable time.
But your server returns a static file, so this isn't true.
You need to use the PagingMemoryProxy component!
Your current logic only works with Paging Memory Proxy. Most (?) people will return 5 records.
Several threads on this around.
Actually, i already have a search for the forum and Google for a period of time and still no luck on my problems. I just wonder this is just mime careless mistake on the code style only, bcos' i just copy and paste the sample code and the sample works but not for me.
P.S. Your tutorial is great with self-descriptive comments. Good for learning :D
#If you have any other info about this subject , Please add it free.# |