PDA

View Full Version : Sending dynamic params with a store.load() containing data from the store itself



p_x_g
9 Nov 2010, 9:16 AM
Ext JS Library 3.3.0

I have a server-supplied XML Dataset like this:


<?xml version="1.0"?>
<dataset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<customer>
<id>1</id>
<name>Peter</name>
</customer>
<customer>
<id>2</id>
<name>Paul</name>
</customer>
<customer>
<id>3</id>
<name>Mary</name>
</customer>
<NavigationArea>
<Rowids>rowid_start|rowid_end</Rowids>
</NavigationArea>
</dataset>


The data does not come from a SQL database. The only way to reposition the server's data is by sending back "rowid_start" and "rowid_end" that is sent in the server's XML response above (along with a direction indicator, not shown in this example)

I can change the structure of the XML data, if needed to make this easier and/or work.

How can I send back the current value of <Rowids> in each call to store.load()? There will only be on instance of <Rowids> per XML response.

I suspect that using the PagingToolBar won't work for me, and that is OK. I can create a tool bar with my own first/previous/next/last buttons.

My code that just shows the data at initial load:



Ext.onReady(function(){
// I thought maybe a second reader to find Rowids.
var reader2 = new Ext.data.XmlReader({
record: 'NavigationArea',
id: 'Rowids',
fields: [
'Rowids'
]
});
var reader = new Ext.data.XmlReader({
record: 'customer',
idPath: 'id',
fields: [
{name: 'id' },
{name: 'name' }
]
});
var store = new Ext.data.Store({
autoDestroy: true,
url: 'getData2.p',
reader: reader
});
var grid = new Ext.grid.GridPanel({
width:700,
height:500,
title:'Customers',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
// grid columns
columns:[{
id: 'customer_id', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Id",
dataIndex: 'id'
},{
header: "Name",
dataIndex: 'name',
width: 400
}],

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: "",
emptyMsg: "There were no records to display",
afterPageText: "",
beforePageText: "",
listeners: {
render: function(c){
c.inputItem.hideParent = true; // Since my source cannot tell
c.inputItem.hide(); // me how many rows total there
} // are, I hide this field.
}
})
});

// render it
grid.render('topic-grid');
// trigger the data store load
store.load();
});