PDA

View Full Version : Need help with XML reader with datastore



setu01
3 Jun 2011, 8:03 AM
I am having issue with the xml reader in my datastore. I have a servlet thats returning the xml response, I have setup store that has xml reader and has all information about the record and all the elements that will appear in xml string. I see the response string in firebut, but my grid does not render any data from xml. am I doing anything wrong with xml store?

Here is my javascript code.



var activitybydate = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'http://localhost:8080/payreport/paymentrequest?report=activitybydate'}),

reader: new Ext.data.XmlReader({
record: 'item'
}, [
'entrydate', 'origin_id', 'pay_type', 'req_type','trans', 'amount'
]),
});


Here is response from servlet



<list>
<item>
<entrydate>2011-06-03</entrydate>
<origin_id>EXPENSE</origin_id>
<pay_type>CASH</pay_type>
<req_type>CONFIRMATION</req_type>
<trans>CONFIRMATION</trans>
<amount>0.01000000</amount>
</item>

<item>
<entrydate>2011-06-03</entrydate>
<origin_id>EXPENSE</origin_id>
<pay_type>CASH</pay_type>
<req_type>FUNDCONFIRM</req_type>
<trans>FUNDCONFIRM</trans>
<amount>2.01000000</amount>
</item>
</list>

Premier
4 Jun 2011, 11:28 PM
Did you start loading data?


activitybydate.load();

setu01
6 Jun 2011, 4:49 AM
yes, I did load the store and thats why I see the xml data coming back in response.

stdunbar
8 Jun 2011, 8:26 AM
Can you post a bit more? I'm doing something very similar in many places in my app (Tomcat/Glassfish on the backend, XML to ExtJS on the front end) and it's working very well.

What does your grid code look like?

setu01
8 Jun 2011, 10:12 AM
here is my grid code

<CODE>
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/

Ext.onReady(function(){
var pagesize = 100;

var activitybydate = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'http://localhost:8080/payreport/paymentrequest?report=activitybydate'}),

reader: new Ext.data.XmlReader({
record: 'item'
}, [
{name: 'entrydate', mapping: 'entrydate' },
'origin_id', 'pay_type', 'req_type','trans', 'amount'
]),
});

var filterRow = new Ext.ux.grid.FilterRow({
// automatically refilter store when records are added
refilterOnStoreUpdate: true
});

var activitybydategrid = new Ext.grid.GridPanel({
width:1050,
height:600,
title:'Activity By Date',
store: activitybydate,
trackMouseOver:true,
disableSelection:false,
loadMask: true,
plugins: [filterRow],

// grid columns
columns:[{
header: "Entry Date",
dataIndex: 'entrydate',
width: 150,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
filter: {
// Filter by string beginnings,
// the default is to filter by occurance ("/{0}/i")
test: "/^{0}/i"
}
},{
header: "Origin",
dataIndex: 'origin_id',
width: 150,
sortable: true,
filter: {
field: {
xtype: "combo",
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'value'
],
data: [['EXPENSE'], ['INVOICE'], ['EXPBREEZE'], ['SYSTEM']]
}),
valueField: 'value',
displayField: 'value',
triggerAction: 'all',
value: "-"
},
fieldEvents: ["select"],
test: function(filterValue, value, record) {
return filterValue === "-" || filterValue === value;
}
}
},{
header: "Pay Type",
dataIndex: 'pay_type',
width: 150,
align: 'right',
sortable: true,
filter: {
// Filter by string beginnings,
// the default is to filter by occurance ("/{0}/i")
test: "/^{0}/i"
}
},{
header: "Request Type",
dataIndex: 'req_type',
width: 150,
sortable: true,
filter: {
// Filter by string beginnings,
// the default is to filter by occurance ("/{0}/i")
test: "/^{0}/i"
}
},{
header: "Trans",
dataIndex: 'trans',
width: 150,
sortable: true,
filter: {
// Filter by string beginnings,
// the default is to filter by occurance ("/{0}/i")
test: "/^{0}/i"
}
},{
header: "Amount",
dataIndex: 'amount',
width: 150,
sortable: true,
filter: {
// Filter by string beginnings,
// the default is to filter by occurance ("/{0}/i")
test: "/^{0}/i"
}

}],
bbar: new Ext.Toolbar({
buttons: [{
id: 'grid-excel-button',
text: 'Export to Excel',
handler: function(){
document.location='data:application/vnd.ms-excel;base64,' + Base64.encode(fortknoxclientsgrid.getExcelXml());
}},
{
id: 'reload',
text: 'Reload',
handler: function(){
activitybydate.load();
}},
{
id: 'reset',
text: 'Reset',
handler: function(){
window.location = "activitybydate.html";
}}
]
})
});

var displayPanel1 = new Ext.Panel({
width : 1050,
height : 600,
layout: 'fit',
renderTo : 'container1',
items : [activitybydategrid],
});

// trigger the data store load
activitybydate.load();
});
</CODE>

here is my java code that builds xml.

<CODE>
jsonDataBuff = new StringBuffer(" <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
while(rs.next()){
jsonDataBuff.append("<item>\n");
jsonDataBuff.append("<entrydate>").append(getString(rs,"EntryDate")).append("</entrydate>\n");
jsonDataBuff.append("<origin_id>").append(getString(rs,"origin_id")).append("</origin_id>\n");
jsonDataBuff.append("<pay_type>").append(getString(rs,"pay_type")).append("</pay_type>\n");
jsonDataBuff.append("<req_type>").append(getString(rs,"req_type")).append("</req_type>\n");
jsonDataBuff.append("<trans>").append(getString(rs,"req_type")).append("</trans>\n");
jsonDataBuff.append("<amount>").append(getString(rs,"amount")).append("</amount>\n");
jsonDataBuff.append("</item>\n");
}

</CODE>

stdunbar
8 Jun 2011, 1:54 PM
While there were a few errors in your JavaScript - watch those trailing commas as they totally mess up IE - I was able to get your code working fine though I didn't have all the dependencies. I removed things from your JavaScript like the FilterRow.

You're making the Java side much more difficult than it needs to be. Java 6 includes many facilities to help you manage XML. It is the primary reason that I use XML instead of JSON (though the Google GSON library does a pretty good job). I've attached a WAR file that uses the facilities of JAXB that are included with Java 6.

Part of this is defining your XML outside using a schema file. This is not a requirement but I feel that it makes your life easier. If you're going to have a service oriented architecture then rigidly defining the XML that you send and receive will make your life easier.

The build.xml uses ant to build a very simple service. The index.jsp points to ExtJS 3.3.1 which is the version that I'm using. But it isn't included in the WAR as it makes things big and really I can't distribute it.

Again, while the Java side may look a bit foreign the JavaScript side is almost exactly your code, except for running it though http://jsbeautifier.org/ and then http://www.jslint.com/.

Let me know if you run into any issues.

stdunbar
8 Jun 2011, 2:06 PM
I couldn't attach the file so I put it at http://xigole.com/sencha/sencha.renametowar - just rename the downloaded file to war, extract it to your webapps directory under Tomcat, copy ExtJS to the "js" directory and give it a shot.

setu01
8 Jun 2011, 3:19 PM
thank you so much stdunbar, I really appreciate you looking into this for me. I will give this a try and let you know how it works. The JAXB will definitely help me. Thank you so much again.