PDA

View Full Version : XML Grid with Pagination Question



Packmule
17 Nov 2010, 2:32 AM
Hi Everyone,

I'm new to Ext JS and I'm playing around with the Ext Grid's at the moment.
I've created a Grid that fills it's store from XML which is dynamically generated by an ASP.NET page.
I've also enabled pagination, but with one issue so far.

For some reason unbeknown to be, when trying to navigate to another page, the paging controls on the grid update themselves and report that I am now on page X, Y or Z etc... however the records in the grid remain unchanged.

I only see the first page's records no matter which page I have supposedly navigated to.

Can anyone suggest a solution?

I have a feeling I'm just missing out a setting, so I'll post my code if need be, but right now I doubt you'll need it (or maybe I'm wrong?).

Thanks / Regards

Screamy
17 Nov 2010, 9:48 AM
This problem occurs if your Grid, Store and PagingToolbar are defined as 'xtypes'. The fix is to rebind the store to the PagingToolbar. I documented this problem in detail in the post linked below. In the code sample, look at the 'listeners' section of the grid example:

http://www.sencha.com/forum/showthread.php?110542-Using-xtype-for-grid-store-paging-toolbar-breaks-data-binding-SOLVED

Packmule
10 Dec 2010, 12:32 AM
Hi Screamy,

Sorry for the late reply, been very busy! This problem took a back burner.

Thanks for the help (appreciate it!), but I'm still not 100% certain where I need to make the change in my code.

Below is my code as it now stands, can you see what I', doing wrong?:



var oListGrid = null;

Ext.onReady(function()
{

Ext.BLANK_IMAGE_URL = '../js/extjs/resources/images/default/s.gif';
/**
* Handler specified for the 'Available' column renderer
* @param {Object} value
*/
function formatDate(value)
{
return value ? value.dateFormat('M d, Y') : '';
}
// shorthand alias
var fm = Ext.form;
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
},
columns: [
{
id: 'field1',
header: 'Field1',
dataIndex: 'field1',
width: 60,
hidden: true,
// use shorthand alias defined above
editor: new fm.TextField(
{
allowBlank: false
})
}, {
id: 'field2',
header: 'Field 2',
dataIndex: 'field2',
width: 80,
// use shorthand alias defined above
editor: new fm.TextField(
{
allowBlank: false
})
}, {
id: 'field3',
header: 'Field 3',
dataIndex: 'field3',
width: 250,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
}, {
id: 'field4',
header: 'Field 4',
dataIndex: 'field4',
width: 150,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
}, {
id: 'field5',
header: 'Field 5',
dataIndex: 'field5',
width: 150,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
}, {
id: 'field6',
header: 'Field 6',
dataIndex: 'field6',
width: 100,
// use shorthand alias defined above
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'status',
lazyRender: true,
listClass: 'x-combo-list-small'
})
},
{
header: 'Field 7',
hidden: true,
width: 150,
renderer: formatDate,
// editor: new fm.DateField({
// format: 'mmm/dd/yyyy'
// })
editor: new fm.TextField({
allowBlank: false
})
},
{
id: 'field8',
header: 'Field 8',
hidden: true,
dataIndex: 'field8',
width: 150,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},
{
header: 'field9',
hidden: true,
width: 150,
renderer: formatDate,
// editor: new fm.DateField({
// format: 'm/d/y'
// })
editor: new fm.TextField({
allowBlank: false
})
}, {
id: 'field10',
header: 'Field 10',
hidden: true,
dataIndex: 'field',
width: 150,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
}
]
});

// create the Data Store
var store = new Ext.data.Store(
{
totalProperty: 'total',

remoteSort: true,

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader(
{
// records will have a 'account' tag
record: 'account',

// use an Array of field definition objects to implicitly create a Record constructor
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{ name: 'field1', type: 'string' },
{ name: 'field2', type: 'string' },
{ name: 'field3', type: 'string' },
{ name: 'field4', type: 'string' },
{ name: 'field5', type: 'string' },
{ name: 'field6', type: 'string' },
{ name: 'field7', type: 'date', dateFormat: 'm/d/Y'},
{ name: 'field8', type: 'string'},
{ name: 'field9', type: 'date', dateFormat: 'm/d/Y' },
{ name: 'field10', type: 'string' }
]
}),

// load using HTTP
url: '../aspx/get/getxmllist.aspx'
});

// create the grid
oListGrid = new Ext.grid.GridPanel({
store: store,
cm: cm,
renderTo:'grid-holder',
title: 'XML Grid Test',
trackMouseOver:true,
disableSelection:false,
loadMask: true,
width: 770,
height: 450,
// paging bar on the bottom
bbar: new Ext.PagingToolbar(
{
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: "No items to display",
items:[]
}),

listeners:
{
afterrender: function(component)
{
// lazy init of JonStore doens't bind correctly on construction,
// this fixes the binding.
component.getBottomToolbar().bindStore(component.store, true);

// do the initial load on the store, passing the params required by the
// paging toolbar.
component.store.load({params: {start: 0, limit: 25}});

alert("afterrender")
},

rowdblclick : function(grid, rowIndex, e)
{
handleGridRowDblClick(grid, rowIndex, e);
}
}
});
store.load({params:{start:0, limit:25}});
});

Animal
10 Dec 2010, 5:28 AM
Is your server script actually taking notice of the start and limit parameters and only sending back the page you request?

Packmule
10 Dec 2010, 6:25 AM
Hi Animal,

How would I know if it was?
Does the JavaScript post params to the remote page? If so, how do I retreive the params sent?

Thanks / Regards

Animal
10 Dec 2010, 6:53 AM
?

It's your app!

Packmule
10 Dec 2010, 7:12 AM
I don't mean that you must tell me specifically, line for line, what code I must write...

I just wanted to know how Ext JS allows my remote page to access parameters it sends to the page, if it even sends any parameters at all.

I'm still quite new to everything and haven't yet had enough time to really get familar with the documentation.

Sorry for the confusion.

Condor
10 Dec 2010, 7:42 AM
Ext sends the 'start' and 'limit' parameters to the server (and with remoteSort:true also 'sort' and 'dir' parameters).

Your server should return only <limit> records starting with record <start>, sorted by the <sort> field in direction <dir>.

Packmule
10 Dec 2010, 9:28 AM
Hi Condor,

Do you know how does Ext sends the parameters?
Does it HTTP POST them? Would I be able to use the ASP.NET Request.Form["..."] method to retrieve them?

How should I return the limit parameter? Currently the page it's posting too is returning only XML. Should those parameter be included somewhere in the XML returned or maybe in the HTTP headers?

Thanks for the help!

Condor
10 Dec 2010, 9:48 AM
Yes, the parameters are POSTed by default, but you can change that in the proxy.

I'm not a .NET programmer so I don't know how to process the parameters in thr asp page.

No, you don't need to return the parameters to the client; just the records and the total count.

Packmule
15 Dec 2010, 10:07 AM
Hi Condor,

I've managed to access the start and limit values POSTed by Ext, but how should I return the total count value?
Should I include it in the XML response?

Packmule
15 Dec 2010, 10:36 AM
Ok, I've got it working! Oh Yeah!

Thanks for the help!