PDA

View Full Version : Grid paging problem



Tina G
7 Aug 2007, 2:33 AM
Need help with grid paging. Currently reading from an array but eventually plan to read from a resource bundle (.properties file).
Problems:
1. first time page loads - no records are dispalyed in grid
2. all records listed in one go on first page. contents remain the same though it pagination displays page 1 of 5, page 2 of 5 etc.

paging.js

/*
* Ext JS Library 1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://www.extjs.com/license
*/

Ext.onReady(function(){

var gridData = [
['Prompt1', '1.wav', '5/1/2007 12:30am'],
['Prompt2', '2.wav', '5/2/2007 12:30am'],
['Prompt3', '3.wav', '5/6/2007 12:30am'],
['Prompt4', '4.wav', '1/15/2007 12:30am'],
['Prompt5', '5.wav', '5/1/2007 12:30am'],
['Prompt12', '6.wav', '5/2/2007 12:30am'],
['Prompt13', '7.wav', '5/6/2007 12:30am'],
['Prompt14', '8.wav', '1/15/2007 12:30am'],
['Prompt11', '9.wav', '5/1/2007 12:30am'],
['Prompt21', '10.wav', '5/2/2007 12:30am'],
['Prompt31', '11.wav', '5/6/2007 12:30am'],
['Prompt41', '12.wav', '1/15/2007 12:30am'],
['Prompt15', '13.wav', '5/1/2007 12:30am'],
['Prompt25', '14.wav', '5/2/2007 12:30am'],
['Prompt35', '15.wav', '5/6/2007 12:30am'],
['Prompt45', '16.wav', '1/15/2007 12:30am'],
['Prompt16', '17.wav', '5/1/2007 12:30am'],
['Prompt26', '18.wav', '5/2/2007 12:30am'],
['Prompt36', '19.wav', '5/6/2007 12:30am'],
['Prompt46', '20.wav', '1/15/2007 12:30am'],
['Prompt17', '21.wav', '5/1/2007 12:30am'],
['Prompt27', '22.wav', '5/2/2007 12:30am'],
['Prompt37', '23.wav', '5/6/2007 12:30am'],
['Prompt47', '24.wav', '1/15/2007 12:30am']
];

// create the Data Store
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(gridData),
reader: new Ext.data.ArrayReader(
{id: 0},
[
{name: 'description'},
{name: 'wave file'},
{name: 'upload date', type: 'date', dateFormat: 'n/j/Y h:ia'}
]
)
});


// pluggable renders
function renderTopic(value, p, record){
return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
}
function renderTopicPlain(value){
return String.format('<b><i>{0}</i></b>', value);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
}
function renderLastPlain(value){
return value.dateFormat('M j, Y, g:i a');
}

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: 'Description',
dataIndex: 'description',
sortable: true,
width: 250,
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
allowBlank: false
}
)
),
renderer: renderTopicPlain,
css: 'white-space:normal;'
},{
id: 'last',
header: 'Wave File',
dataIndex: 'wave file',
width: 100,
sortable: true,
renderer: renderTopicPlain
}]);



// create the editor grid
var grid = new Ext.grid.Grid('topic-grid', {
ds: ds,
cm: cm,
autoSizeColumns: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true
});

// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('topic-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
rz.on('resize', grid.autoSize, grid);

// render it
grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 5,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
// add the detailed view button
paging.add('-', {
pressed: true,
enableToggle:true,
text: 'Detailed View',
cls: 'x-btn-text-icon details',
toggleHandler: toggleDetails
});

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

// trigger the data store load
paging.onClick = function(which){
ds = this.ds;
switch(which){
/*
case "first":
ds.load({params:{start: 0, limit: this.pageSize}});
break;
*/
case "prev":
ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
break;
case "next":
ds.load({params:{start: this.cursor+this.pageSize, limit: start+this.pageSize}});
break;
case "last":
var total = ds.getTotalCount();
var extra = total % this.pageSize;
var lastStart = extra ? (total - extra) : total-this.pageSize;
ds.load({params:{start: lastStart, limit: this.pageSize}});
break;
};
}


function toggleDetails(btn, pressed){
cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
grid.getView().refresh();
}

});


paging.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>

<link rel="stylesheet" type="text/css" href="../ext-1.1/resources/css/ext-all.css" />

<script type="text/javascript" src="../ext-1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-1.1/ext-all.js"></script>

<script type="text/javascript" src="paging.js"></script>
<link rel="stylesheet" type="text/css" href="../ext-1.1/examples/grid/grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../ext-1.1/examples/examples.css" />
</head>
<body>
<script type="text/javascript" src="../ext-1.1/examples/examples.js"></script>
<h1>Paging Grid Example</h1>
<p>This example shows how to create an array grid with paging.</p>
<div style="width:694px;" class="x-box-blue">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Prompts Grid</h3>
<div id="topic-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;position:relative;left:0;top:0;"></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

</body>
</html>

Animal
7 Aug 2007, 2:55 AM
Paging is for server-side data.

You have all the data there in an array, just scroll it!

kei
10 Aug 2007, 2:36 AM
Any workaround for a client-side paging then?
I know it's silly but my app requires one too. ^^

dogomatic
22 Aug 2007, 6:45 AM
There are some situations that really do need client side pagination.

If the time to load data is small compared to the time to display data, then I think client side pagination is useful. Like if it takes you about as much time to load 500 rows as 50 and the table is not performant with 500 rows then you want client side paging.

It takes Ext 14 seconds to render a table of 500 rows on my Athlon x2 4200.

btw YUI does client side pagination :P

http://developer.yahoo.com/yui/examples/datatable/dt_clientpagination.html

[edit] Hmm... found this thread
http://extjs.com/forum/showthread.php?t=3793&highlight=paging+memory+grid&page=2