salve a tutti
vorrei avere se possibile qualche spiegazione in piu sul caricamento di dati xml su ext js, io ho provato ad utilizzare l'esempio del vostro bel articolo di nunzio fiore, ma non compaiono i dati.
Grazie a presto
ecco il codice:
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
var cp = new Ext.state.CookieProvider({
path: "/",
expires: new Date(new Date().getTime()+(1000*60*60*24*3650))
})
Ext.state.Manager.setProvider(cp);
Ext.util.CSS.swapStyleSheet('theme', '/ext/resources/css/xtheme-gray.css');
// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: '/kiki/data/articles.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Article" tag
record: 'Article',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ArticleAttributes > Author'},
'Title',
'Site',
'Type',
'Category',
'HasSnippet',
// Detail URL is not part of the column model of the grid
'Lang',
'PageUrl',
'UrlSnippet',
'Description'
])
});
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Title", width: 220, dataIndex: 'Title', sortable: true},
{header: "Site", width: 100,dataIndex: 'Site', sortable: true},
{header: "Type", width: 50, dataIndex: 'Type', sortable: true},
{header: "Category", width: 50, dataIndex: 'Category', sortable: true},
{header: "Lang", width: 50,dataIndex: 'Lang', sortable: true},
{header: "Snip", width: 50, dataIndex: 'HasSnippet', sortable: true},
{header: "Author", width: 60, dataIndex: 'Author', sortable: true}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig: {
forceFit: true
},
height:310,
split: true,
region: 'north'
});
// define a template to use for the detail view
var articleTplMarkup = [
'Title: {Title}
',
'Author: {Author}
',
'Lang: {Lang}
',
'Type: {Type}
',
'Site: {Site}, {Category}
',
'Description: {Description}
',
'Has a snippet for download: {HasSnippet}
',
'{UrlSnippet}',
];
var articleTpl = new Ext.Template(articleTplMarkup);
var ct = new Ext.Panel({
renderTo: 'binding-example',
frame: true,
title: 'Article List',
width:800,
height: 600,
layout: 'border',
items: [
grid,
{
id: 'detailPanel',
region: 'center',
bodyStyle: {
background: '#fefefe',
padding: '7px'
},
html: '[img]/img/arrowup.jpg[/img]
Please select an article to see additional details.'
}
]
})
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');
articleTpl.overwrite(detailPanel.body, r.data);
});
store.load();
});
e questo è l'html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MoonKiKi - complete list of articles</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="js/kiki.js"></script>
</head>
<body>
<div id="container" >
<div id="binding-example"></div>
</div>
</body>
</html>