PDA

View Full Version : How to load xml data into a grid?



Tina G
3 Aug 2007, 1:53 AM
Need to load the xml data into a grid. Nothing is coming. Don't know where it is going wrong.

My booklist.xml is as follows:


<?xml version="1.0"?>
<dataset>
<results>2</results>
<item>
<author>Sidney Sheldon</author>
<manufacturer>Warner Books</manufacturer>
<productgroup>Book</productgroup>
<title>Master of the Game</title>
</item>
<item>
<author>Sidney Sheldon</author>
<manufacturer>Warner Books</manufacturer>
<productgroup>Book</productgroup>
<title>Are You Afraid of the Dark?</title>
</item>
</dataset>

grid.js:


Ext.onReady(function(){

var ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url: 'booklist.xml'}),

reader: new Ext.data.XmlReader({
// records will have an "Item" tag
totalRecords: 'results',
record: 'item'
}, [
{name: 'author',mapping: 'author'},
'manufacturer', 'productgroup', 'title'
])
});

var cm = new Ext.grid.ColumnModel([
{header: "Author", width: 120, dataIndex: 'author'},
{header: "Manufacturer", width: 115, dataIndex: 'manufacturer'},
{header: "Product Group", width: 100, dataIndex: 'productgroup'},
{header: "Title", width: 180, dataIndex: 'title'}
]);
cm.defaultSortable = true;

// create the grid
var grid = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm
});
grid.render();

ds.load();
});

grid.html has:


<div id="example-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;"></div>

</body>
</html>


Appreciate help on this.
Thanks

torvad
3 Aug 2007, 2:03 AM
Hi,
I'm new to this also but i used the following locate my load problems.

myDs.on('loadexception', function() {
alert('loadexception load: ');
});

If I got the alert I new the problem was in my data or Record definition.

Tina G
3 Aug 2007, 2:15 AM
Looks like I am having problem in loading the data.

mystix
3 Aug 2007, 2:44 AM
try fixing your Store definition like so (not sure if the XmlReader config allows an array of plain old strings as names)


var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'booklist.xml'
}),
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
totalRecords: 'results',
record: 'item'
}, [
{name: 'author'},
{name: 'manufacturer'},
{name: 'productgroup'},
{name: 'title'}
])
});


other than that, everything else looks fine to me.
have you tried the Ajax XML data (http://extjs.com/deploy/ext/examples/grid/xml-grid.html) grid example in the Documentation Center?

Animal
3 Aug 2007, 3:15 AM
Check using Firebug that the request is returning the data you want.

Tina G
6 Aug 2007, 12:59 AM
I modified my xml-grid.js as


/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/

Ext.onReady(function(){

var ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url: 'booklist.xml'}),

reader: new Ext.data.XmlReader({
// records will have an "Item" tag
totalRecords: 'results',
record: 'item'
}, [
{name: 'author'},
{name: 'manufacturer'},
{name: 'productgroup'},
{name: 'title'}
])
});

ds.on('loadexception', function() {
alert('loadexception load: ');
});

var cm = new Ext.grid.ColumnModel([
{header: "Author", width: 120, dataIndex: 'author'},
{header: "Manufacturer", width: 115, dataIndex: 'manufacturer'},
{header: "Product Group", width: 100, dataIndex: 'productgroup'},
{header: "Title", width: 180, dataIndex: 'title'}
]);
cm.defaultSortable = true;

// create the grid
var grid = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm
});
grid.render();

ds.load();
});


It is still not working. Other code remains unchanged.

mystix
6 Aug 2007, 1:21 AM
i just tried your test case with Ext 1.1. final and it works flawlessly
(you might want to compare the code below with your own working copy)


<html>
<head>
<title>Scratchpad</title>
<link rel='stylesheet' href='resources/css/ext-all.css'>
<script src='adapter/ext/ext-base.js'></script>
<script src='ext-all-debug.js'></script>

<script>
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'booklist.xml'}),
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
totalRecords: 'results',
record: 'item'
}, [
{name: 'author'},
{name: 'manufacturer'},
{name: 'productgroup'},
{name: 'title'}
])
});

ds.on('loadexception', function() {
alert('loadexception load: ');
});

var cm = new Ext.grid.ColumnModel([
{header: "Author", width: 120, dataIndex: 'author'},
{header: "Manufacturer", width: 115, dataIndex: 'manufacturer'},
{header: "Product Group", width: 100, dataIndex: 'productgroup'},
{header: "Title", width: 180, dataIndex: 'title'}
]);
cm.defaultSortable = true;

// create the grid
var grid = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm
});
grid.render();

ds.load();
});
</script>
</head>
<body>
<div id="example-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;"></div>
</body>
</html>


with your original xml file


<?xml version="1.0"?>
<dataset>
<results>2</results>
<item>
<author>Sidney Sheldon</author>
<manufacturer>Warner Books</manufacturer>
<productgroup>Book</productgroup>
<title>Master of the Game</title>
</item>
<item>
<author>Sidney Sheldon</author>
<manufacturer>Warner Books</manufacturer>
<productgroup>Book</productgroup>
<title>Are You Afraid of the Dark?</title>
</item>
</dataset>


and here's the result:
http://img236.imageshack.us/img236/3394/gridpk1.png

Tina G
6 Aug 2007, 2:00 AM
I am keeping the .html file, booklist.xml in directory ~ext-1.1/ on my desktop.

I am selecting my .html file and opening it using Firefox. I am getting load exception (an alert box). I am using the same html u sent.

This is surprising; same piece of code working at your end and failing at mine.

mystix
6 Aug 2007, 2:30 AM
I am keeping the .html file, booklist.xml in directory ~ext-1.1/ on my desktop.

I am selecting my .html file and opening it using Firefox. I am getting load exception (an alert box). I am using the same html u sent.
Desktop?? Opening it in Firefox??
you are running this example from a webserver (like tomcat / jetty/ simplewwwserver etc) right?

you can't possibly expect to get XHR (i.e. AJAX) examples working without a server side platform.

[edit]
you might also want to check out this FAQ on server-side platforms (http://extjs.com/learn/Ext_FAQ#What_server_platforms_are_compatible_with_Ext.3F) in the Learn (http://extjs.com/learn) section of this site.

mystix
6 Aug 2007, 5:50 AM
latest update:

someone has apparently managed to get XHR running without a webserver.
see this thread (http://extjs.com/forum/showthread.php?p=52068#post52068)