View Full Version : [SOLVED]Paging malfunctioning? and displayMsg is depends on the paging buttons?

22 Dec 2009, 7:56 PM
there's 8 unsorted data:

<?xml version="1.0" encoding="UTF-8"?>
<Description>Product 4</Description>
<Description>Product 5</Description>
<Description>Product 6</Description>
<Description>Product 7</Description>
<Description>Product 8/Description>
<Description>Product 1</Description>
<Description>Product 2</Description>
<Description>Product 3</Description>
here's the full code:

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/resources/css/ext-all.css" media="all" />
<script type="text/javascript" src="<%=request.getContextPath() %>/js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ext-all.js"></script>
<!-- <script type="text/javascript" src="<%=request.getContextPath() %>/js/ext-all-debug.js"></script> -->
<script type="text/javascript"><!--
Ext.BLANK_IMAGE_URL = "js/resources/images/default/s.gif";
// --></script>
<script type="text/javascript">

// create the data store with http proxy & xml data reader
var ds = new Ext.data.Store({
// proxy invokes products.do on server
proxy: new Ext.data.HttpProxy({url: 'product.htm'}),

// reads XML data returned from proxy & parses into Records
reader: new Ext.data.XmlReader({
record: 'Product', // xml node name of record (i.e. <Product><id></id>...</Product>)
totalProperty: 'totalCount',
idProperty: 'Id'
// Field names & xml mappings
{name: 'id', mapping: 'Id'},
{name: 'description', mapping: 'Description'},
{name: 'price', mapping: 'Price'}
//,{name: 'category', mapping: 'Category'}

}); // end ds
ds.setDefaultSort('id', 'ASC');

// column model describing grid headers with their associated mapping to data store fields
var cm = new Ext.grid.ColumnModel([
{header: "ID", width: 120, dataIndex: 'id', sortable: true},
{header: "Description", width: 180, dataIndex: 'description', sortable: true},
{header: "Price", width: 100, dataIndex: 'price', sortable: true}

// create grid with data store and column model
var grid = new Ext.grid.GridPanel({
store: ds,
cm: cm,
autoHeight: true,
loadMask: true,
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 3,
store: ds,
displayInfo: true,
displayMsg: 'Displaying products {0} - {1} of {2}',
emptyMsg: "No products to display"
// customize view config
viewConfig: {

// render it

ds.load({params:{start:0, limit:3}});

<div id="gridPaging"></div>
but it outputs the 8 sorted data on the initial page load.
then during paging, outputs the same data...

the number of pages displayed are correct...but displayMsg is not the expected result...maybe it depends on the paging buttons(next,prev...)

sample paging and displayMsg output

initial load: Page 1 of 3 Displaying products 1 - 8 of 8
next clicked: Page 2 of 3 Displaying products 4 -11 of 8
next clicked: Page 3 of 3 Displaying products 7 -14 of 8
prev clicked: Page 2 of 3 Displaying products 4 -11 of 8

22 Dec 2009, 8:47 PM
I've read the PagingToolbar API documentation.. it is clearly stated that "server script should only send back 25 items at a time"

while in my case, all data are send back... therefore will come up with displaying all the data even the paging is correct...

Sorry for disturbances...

then in the case of returning all the data result from the DB, I've noticed also the Paging with Local Data... maybe that is what i'm looking for...