PDA

View Full Version : How to read XML and bind the data with Grid



trupti.patil
21 May 2012, 5:03 AM
Hello,

I want to read XML and display the data in Grid. Following is my code:

Ext.onReady(function(){
Ext.tip.QuickTipManager.init();

Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{ name: "Source", type: 'string' },
{ name: "Description", type: 'string' },
{ name: "Level", type: 'string' },
{ name: "EventDate", type: 'date', dateFormat: 'timestamp' }
]
});

var store = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'ajax',
url: url,
reader: new Ext.data.XmlReader({
root:'ArrayOfLogEntry',
record: 'LogEntry',
id:'EventId',
fields: ['Source', 'Description','EventDate','Level']
}),
simpleSortMode: true
},
sorters: [{
property: 'EventDate',
direction: 'DESC'
}]
});

var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'Event Log',
store: store,
disableSelection: true,
loadMask: true,
columns:[{text: "EventSource",dataIndex: 'Source',flex: 1,sortable: false},
{text: "Description",dataIndex: 'Description',width: 100,sortable: true},
{text: "EventType",dataIndex: 'Level',width: 70,align: 'right',sortable: true},
{text: "DateTime",dataIndex: 'EventDate',width: 150,sortable: true}],
renderTo: 'wraper'
});
store.loadPage(1);
});

and following is the XML which I get from the url mentioned in store:

<ArrayOfLogEntry xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
<LogEntry>
<Description>An error occured on the server.</Description>
<EventDate>2012-04-12T12:11:38-04:00</EventDate>
<EventId>0</EventId>
<Level>Warning</Level>
<Source>Companion</Source>
</LogEntry>
<LogEntry>
<Description>An error occured on the server.</Description>
<EventDate>2012-04-12T12:11:36-04:00</EventDate>
<EventId>0</EventId>
<Level>Warning</Level>
<Source>Companion</Source>
</LogEntry>
</ArrayOfLogEntry>
------------------------------------------------------------------------
Neither it is showing any error nor showing data in grid.

Please help me to solve the above issue.

VijayThorat
23 May 2012, 9:48 PM
Hi Trupti, I have tested the your code and it works . It renders data from xml provided.
try it with <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all.js"></script> in index.html.
Regards,
Vijay

trupti.patil
4 Jun 2012, 9:01 PM
Hi Vijay,

If we give xml file then it works fine. However, if we give ajax URL then it doesn't read xml from ajax URL.

e.g. var store = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'ajax',
url: 'http://localhost/Logs',
reader: new Ext.data.XmlReader({
root:'ArrayOfLogEntry',
record: 'LogEntry',
id:'EventId',
fields: ['Source','Description','EventDate','Level']
}),
simpleSortMode: true
},
sorters: [{
property: 'EventDate',
direction: 'DESC'
}]
});

See url in green color. It is AJAX URL.

droessner
5 Jun 2012, 5:45 PM
You'll need to add the autoLoad: true property to the store or manually call the store.load() method so that the proxy is called.