PDA

View Full Version : DataGrid Won't Render



Bobafart
19 Apr 2007, 2:59 PM
I thought I would give Ext-1.0 a try. I created a data grid but it won't render. I am clearly mapping something wrong then but I am not sure what.


my XML data works nicely according to Firebug.



<rss version="2.0">

<channel>

<item>
<troopId>1</troopId>
<troopName>SoldierName</troopName>
<troopHP>100</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Private</troopRank>
</item>

<item>
<troopId>2</troopId>
<troopName>Soldier2</troopName>
<troopHP>122</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Sargent</troopRank>
</item>

<item>
<troopId>3</troopId>
<troopName>Soldier3</troopName>
<troopHP>98</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Private</troopRank>
</item>

<item>
<troopId>4</troopId>
<troopName>soldier11</troopName>
<troopHP>1</troopHP>

...etc...


No errors are showing up -- the data box just won't render.

Without any errors and checking and rechecking my code so that it is similar to the examples ain't helping any...


My JS:



<script type="text/javascript">

Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'php/armyExt.php'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'item',
id: 'troopId',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Soldier', mapping: 'item > troopName'},
'HP', 'Squad', 'Specialty', 'Rank'
])
});

var cm = new Ext.grid.ColumnModel([
{header: "Soldier", width: 180, dataIndex: 'troopName'},
{header: "HP", width: 115, dataIndex: 'troopHP'},
{header: "Squad", width: 100, dataIndex: 'troopSquad'},
{header: "Specialty", width: 100, dataIndex: 'troopSpecialty'},
{header: "Rank", width: 100, dataIndex: 'troopRank'}
]);
cm.defaultSortable = true;

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

ds.load();
});

</script>

Animal
19 Apr 2007, 3:45 PM
totalRecords: '@total'


That means that the XmlReader looks for an attribute called "total" in your XML document from which to determine the total record count.



}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Soldier', mapping: 'item > troopName'},
'HP', 'Squad', 'Specialty', 'Rank'
])


This is the definition of a data Record. Each item specifies the name of a field in Ext's Record object that is made available to the Grid, and, in the "mapping" property the DomQuery path relative to the record from which to read that field.

So the field "Soldier" looks for an XML element inside the record element (which you have correctly defined as "item") called "troopName" which is inside an element called "item". There is no such element inside the "item" element.

The other field names do not have a mapping, so the XmlReader assumes that the XML path is the same as the name. There are no such elements.



{header: "Soldier", width: 180, dataIndex: 'troopName'},
{header: "HP", width: 115, dataIndex: 'troopHP'},
{header: "Squad", width: 100, dataIndex: 'troopSquad'},
{header: "Specialty", width: 100, dataIndex: 'troopSpecialty'},
{header: "Rank", width: 100, dataIndex: 'troopRank'}


The "dataIndex" property refers to the field name that you specified in the Record definition. None of those field names exist.

You have just not read and followed the examples.

Bobafart
19 Apr 2007, 4:13 PM
Ok so I will keep things entirely simple and take in your suggestions.

I will leave the XML data the same (which is shown above).

I have experimented by changing the header names to be the same as the element names so that there is no chance for error.

Now the "dataIndex" property refers to the field name that I specified in the Record definition, yet the data grid still doesn't render.




Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'php/armyExt.php'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'item',
id: 'troopId'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'troopName', mapping: 'item > troopName'},
'troopHP', 'troopSquad', 'troopSpecialty', 'troopRank'
])
});

var cm = new Ext.grid.ColumnModel([
{header: "troopName", width: 180, dataIndex: 'troopName'},
{header: "troopHP", width: 115, dataIndex: 'troopHP'},
{header: "troopSquad", width: 100, dataIndex: 'troopSquad'},
{header: "troopSpecialty", width: 100, dataIndex: 'troopSpecialty'},
{header: "troopRank", width: 100, dataIndex: 'troopRank'}
]);
cm.defaultSortable = true;

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

ds.load();
});

Bobafart
19 Apr 2007, 4:18 PM
just for giggles I made the following code adjustments of my XML and my JS:



<rss version="2.0">

<channel>

<item>
<troopId>1</troopId>

<itemAttribute>
<troopName>SoldierName</troopName>
<troopHP>100</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Private</troopRank>
</itemAttribute>
</item>

<item>
<troopId>2</troopId>

<itemAttribute>
<troopName>Soldier2</troopName>
<troopHP>122</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Sargent</troopRank>
</itemAttribute>
</item>

<item>
<troopId>3</troopId>

<itemAttribute>
<troopName>Soldier3</troopName>
<troopHP>98</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Private</troopRank>
</itemAttribute>
</item>

<item>
<troopId>4</troopId>

... etc...






Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'php/armyExt.php'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'item',
id: 'troopId'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'troopName', mapping: 'itemAttribute > troopName'},
'troopHP', 'troopSquad', 'troopSpecialty', 'troopRank'
])
});

var cm = new Ext.grid.ColumnModel([
{header: "troopName", width: 180, dataIndex: 'troopName'},
{header: "troopHP", width: 115, dataIndex: 'troopHP'},
{header: "troopSquad", width: 100, dataIndex: 'troopSquad'},
{header: "troopSpecialty", width: 100, dataIndex: 'troopSpecialty'},
{header: "troopRank", width: 100, dataIndex: 'troopRank'}
]);
cm.defaultSortable = true;

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

ds.load();
});


Same problem: grid doesn't render. No errors in firebug.

Animal
19 Apr 2007, 4:29 PM
The headers can be anything. As I explained, the ColumnModel's dataIndex refers to the field name.

The Record definition's mapping refers to an XML element.

Don't use an <itemAttribute>, the data can just go in the item, and the mapping is just the element name from which you want the data.

Bobafart
19 Apr 2007, 4:57 PM
The headers can be anything. As I explained, the ColumnModel's dataIndex refers to the field name.

I realize this. However, I kept them the same to make it simplistic. And it still doesn't work.


Don't use an <itemAttribute>, the data can just go in the item, and the mapping is just the element name from which you want the data.

In the first two examples I didn't use itemAttribute and the grid doesn't render. I changed the structure of my XML document to follow Jack's example and it still doesn't render.

Animal
19 Apr 2007, 5:18 PM
You ARE setting the Content-Type header to "text/xml" on the server aren't you?

Without that, the browser won't parse the returned data as XML.

Bobafart
19 Apr 2007, 5:21 PM
You ARE setting the Content-Type header to "text/xml" on the server aren't you?

Without that, the browser won't parse the returned data as XML.

Yes I am doing this.

Bobafart
19 Apr 2007, 5:21 PM
Here is a link of my script using the last updated code as posted on this thread:

Animal
19 Apr 2007, 5:28 PM
You need to set the Content-Type header to "text/xml" in your PHP script.

This code works in the examples/grid directory on my server because it's accessing a static XML file from Tomcat which sets the header:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'armyExt.xml'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'item',
id: 'troopId'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'troopName', mapping: 'troopName'},
'troopHP', 'troopSquad', 'troopSpecialty', 'troopRank'
])
});

var cm = new Ext.grid.ColumnModel([
{header: "Soldier Name", width: 180, dataIndex: 'troopName'},
{header: "What's an HP?", width: 115, dataIndex: 'troopHP'},
{header: "Squad", width: 100, dataIndex: 'troopSquad'},
{header: "Specialtiy", width: 100, dataIndex: 'troopSpecialty'},
{header: "Rank", width: 100, dataIndex: 'troopRank'}
]);
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 id="example-grid">
</body>
</html>


The xml file armyExt.xml:



<rss version="2.0">
<channel>
<item>
<troopId>1</troopId>
<troopName>SoldierName</troopName>
<troopHP>100</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Private</troopRank>
</item>
<item>
<troopId>2</troopId>
<troopName>Soldier2</troopName>
<troopHP>122</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Sargent</troopRank>
</item>
<item>
<troopId>3</troopId>
<troopName>Soldier3</troopName>
<troopHP>98</troopHP>
<troopSquad>one</troopSquad>
<troopSpecialty>Soldier</troopSpecialty>
<troopRank>Private</troopRank>
</item>
</channel>
</rss>

Animal
19 Apr 2007, 5:41 PM
Looking at Firebug, your grid is rendering, but not visible.

It's a CSS thing, I'll have another look in the morning.

One thing is that you don't need your x-grid-col-n CSS rules. That's not the problem, just an extra thing you don't need.

I'm going back to bed now, I think I've got over my insomnia.

Animal
19 Apr 2007, 5:44 PM
OK, I got it.

You need ext-all.css in your page.

Bobafart
19 Apr 2007, 6:23 PM
I never would have figured that one out -- I thought I had all of the CSS files.

damn. thank you Animal!!!

Animal
19 Apr 2007, 10:24 PM
Just a hint: Explore the "HTML" tab of Firebug. It's a view of the elements of your document, and you should be able to see that your table has rendered. You can see every last table cell and the data in it.

Right click on an element, and choose "Inspect Element" and it will take you right there. From there you can examine and adjust the CSS settings in great detail. This is very helpful when tweaking stylesheets - you can tweak the styles live before you change the stylesheet so no more repetetive stylesheet adjustments and page reloads.