PDA

View Full Version : How to load a Template with a Xml File ?



xav_allais
17 Jun 2010, 12:58 AM
Please, I need your help.

I studied a lot example and when I try with my xml file it doesn't work...

And yet, my test is very easy...

Here is my xml file :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<elements>
<element>
<name>Jack Slocum</name>
<company>Ext JS, LLC</company>
<city>Cleveland</city>
<state>Ohio</state>
</element>
</elements>
</Root>

Here is my javascript :

Ext.onReady(function() {
var store = new Ext.data.Store({
url: 'tst.xml',
reader: new Ext.data.XmlReader({
record: 'element',
fields: ['name', 'company','city','state']
})
});
store.load();

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "name", width: 120, dataIndex: 'name', sortable: true},
{header: "company", width: 180, dataIndex: 'company', sortable: true},
{header: "city", width: 115, dataIndex: 'city', sortable: true},
{header: "state", width: 100, dataIndex: 'state', sortable: true}
],
renderTo:document.body,
width:540,
height:200
});

//
var tpl = new Ext.Template(
'<p>Name: {name}</p>',
'<p>Company: {company}</p>',
'<p>Location: {city}, {state}</p>'
);
tpl.compile();
tpl.append(document.body, store.getRange());
});

And here is my basic html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Template Test 05</title>
<link rel="stylesheet" type="text/css" href="../extJS/resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../extJS/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../extJS/ext-all.js"></script>

<script type="text/javascript" src="tst.js"></script>
<link rel="stylesheet" type="text/css" href="globalStyle.css" />
</head>
<body>
<!--<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>Template Test 05</h1>

<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->

</body>
</html>

My grid works, but my tpl is empty... I don't understand.

Many thanks for your help,

xav_allais
23 Jun 2010, 1:02 AM
Nobody knows ?

Condor
23 Jun 2010, 1:31 AM
There 2 things wrong with your code:
1. You are not waiting for the store to load.
2. store.getRange() returns an array of records, but your template expects a simple object.

Use:

store.on('load', function(){
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<p>Name: {values.data.name}</p>',
'<p>Company: {values.data.company}</p>',
'<p>Location: {values.data.city}, {values.data.state}</p>',
'</tpl>'
).compile();
tpl.append(Ext.getBody(), store.getRange());
});

xav_allais
25 Jun 2010, 3:43 AM
Great! Many thanks Condor!

Here are all files :

My xml file (tst.xml) :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<elements>
<element>
<name>Jack Slocum</name>
<company>Ext JS, LLC</company>
<city>Cleveland</city>
<state>Ohio</state>
</element>
<element>
<name>Boby Fischer</name>
<company>Chess, LLC</company>
<city>Reykjavik</city>
<state>Islande</state>
</element>
</elements>
</Root>

my html file (index.html) :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Template Test 05</title>
<link rel="stylesheet" type="text/css" href="../extJS/resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../extJS/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../extJS/ext-all.js"></script>

<script type="text/javascript" src="tst.js"></script>
<link rel="stylesheet" type="text/css" href="globalStyle.css" />
</head>
<body>
<!--<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>Template Test 05</h1>

<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->

</body>
</html>

And my javascript file (tst.js) :

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function() {
var store = new Ext.data.Store({
url: 'tst.xml',
reader: new Ext.data.XmlReader({
record: 'element',
fields: ['name', 'company','city','state']
})
});
store.load();

store.on('load', function(){
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "name", width: 120, dataIndex: 'name', sortable: true},
{header: "company", width: 180, dataIndex: 'company', sortable: true},
{header: "city", width: 115, dataIndex: 'city', sortable: true},
{header: "state", width: 100, dataIndex: 'state', sortable: true}
],
renderTo:document.body,
width:540,
height:200
});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<p>Name: {values.data.name}</p>',
'<p>Company: {values.data.company}</p>',
'<p>Location: {values.data.city}, {values.data.state}</p>',
'</tpl>'
).compile();
tpl.append(Ext.getBody(), store.getRange());
});
});