PDA

View Full Version : Paging Toolbar Help



alejandroNNU
4 Feb 2014, 12:25 PM
Hey all,

I am trying to set up paging for my gridpanel so that it shows 50 records per 'page', I tried using the paging toolbar but when the grid/store populates the toolbar just shows page 0 of 0, all the buttons are greyed out and I get the 'no data to display' message, meaning it's not detecting any records at all, could someone tell me what I'm doing wrong here please?

This is the XML store I'm using:


Ext.define('SyslogApp.store.SyslogStore', {
extend: 'Ext.data.Store',


requires: [
'SyslogApp.model.SyslogModel'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'SyslogApp.model.SyslogModel',
storeId: 'MyXmlStore',
groupField: 'sysid',
pageSize: 50,
proxy: {
type: 'ajax',
reader: {
type: 'xml',
record: 'row'
}
}
}, cfg)]);
}
});

and this is my gridpanel and paging toolbar:


{
xtype: 'gridpanel',
flex: 1,
height: 318,
itemId: 'syslogGrid',
width: 1130,
title: 'Logs',
store: 'SyslogStore',
columns: [
{
xtype: 'gridcolumn',
width: 213,
dataIndex: 'syslog_timestamp',
text: 'Timestamp'
},
{
xtype: 'gridcolumn',
dataIndex: 'app_name',
text: 'App Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'username',
text: 'Username'
},
{
xtype: 'gridcolumn',
dataIndex: 'usermac',
text: 'User MAC'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var str = value;
metaData.tdAttr = 'data-qtip="' + str + '"';
return str;
},
width: 615,
dataIndex: 'message',
text: 'Message',
tooltip: 'testing'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
store: 'SyslogStore'
}
]
},


The grid panel populates just fine with the records but the toolbar isn't detecting anything apparently.

scottmartin
4 Feb 2014, 1:55 PM
How may records are you sending back? You should only send the records for the page, then the total record count to the toolbar can calc the pages. Paging does not filter the records for you.

alejandroNNU
4 Feb 2014, 2:14 PM
Ok, I am sending back all the records, which are more than 200, but even if it doesn't filter the records, why is the toolbar not detecting any records at all? when the store/grid populates, the toolbar looks like this:

47808


that's with my XML store. I created a 'dummy' json store that just grabs records from a local file and when I use that one the toolbar looks like this:

47809

and while you are correct, it's not filtering anything, it's showing me all the records on the grid, it's detecting that I have 36 records and dividing them in 4 pages (I chose 10 records per page). So why isn't this working with my XML store? the code is the same, the only thing I'm changing is the store I use for the grid panel and toolbar, the only other difference I can think of is that the XML store doesn't start populated when the app is rendered, it only gets populated after clicking a button, while the JSON store 'auto loads' as soon as the app is rendered i guess, does that affect anything? I can't for the life of me figure out why it isn't working on the XML store, any help would be amazing, thank you.

scottmartin
4 Feb 2014, 2:19 PM
Are you sending the total record count back in your html response?
If your grid has records, then it should work as expected.

alejandroNNU
4 Feb 2014, 2:45 PM
sending the total record count back how? the way the store gets populated is as follows: I send a query which in turn returns an xml document as a reponse which looks like this:

<result>
<row>data</row>
<row>data</row>
<row>data</row>
</result>

which I then load into the store via: store.loadRawData(xmlResponse)

are you saying this response document needs to include the total records returned somewhere? and how does the toolbar know where to look for the total amount of records returned?

scottmartin
4 Feb 2014, 2:52 PM
You need to send it back from the server:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.reader.Reader-cfg-totalProperty

"total: '@totalrecs'"

alejandroNNU
4 Feb 2014, 3:18 PM
Ok, please forgive my ignorance and help me with this final bit because I still don't understand it, can you give me a quick example of what the server response should look like? I get that I need to specify in totalProperty the property that will contain the total number of records, I just don't quite get how it needs to come from the server, can you just give me a quick example of what the response should look like? I didn't understand what you meant by 'total: @totalrecs'. Sorry for the long thread and thank you very much for your help.

scottmartin
4 Feb 2014, 3:42 PM
I do not have an XML example offhand, I believe there are some if you search:

Here is a quick PHP example to show the server returning the records and a total



<?php

$start = $_GET['start'];
$limit = $_GET['limit'];
$name = $_GET['name'] . '_';
$total = $_GET['total'];

for ($i = 0; $i < $limit; $i++) {
$record_num = $i + $start;

$id = $name . $record_num;
$arr[] = "{ name: '$id', email: '[email protected]', phone: '555-111-1224 x$record_num' }";
}

echo "{ success: true, total: $total, rows: [" . join($arr, ', ') . "] }";

?>




Ext.onReady(function() {
var itemsPerPage = 5,
name = 'Sencha',
total = 200; // records to return

var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['name', 'email', 'phone'],
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: 'pagingstore.php',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
},
extraParams: {
name: name,
total: total
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Test Grid',
store: store,
columns: [{
xtype: 'rownumberer'
}, {
header: 'Name',
dataIndex: 'name',
flex: 1
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Phone',
dataIndex: 'phone',
flex: 1
}],
width: 400,
height: 200,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
//plugins: new Ext.ux.SlidingPager() // see kitchensick example to get working
}],
renderTo: Ext.getBody()
});
});

skirtle
5 Feb 2014, 4:54 AM
Have a read of the docs for Ext.data.reader.Xml. The examples at the top do include the passing of the total number of results.

The use of an @ symbol denotes an attribute rather than an element. Whether you need an @ depends on whether your total is held in an attribute or an element.

alejandroNNU
5 Feb 2014, 8:22 AM
Ok, thanks I see it now, quick question, does the total number of records and the actual records have to come in the same response? currently I'm not able to manipulate the response I get from the server, I can only send two separate requests, one to get the total number of records in a dataset, and another one to get the actual records, is there a way to populate the store with the data from one response and use the other response to tell the store what it's 'totalProperty' is?

skirtle
5 Feb 2014, 7:09 PM
There's no formal support for that, you'd have to do some overriding to inject the total from the first request into the ResultSet of the second request.