How to parse XML response with Sencha Touch?
Ext.Ajax.request({
url: 'http://bar.c开发者_开发百科om/api/foos/',
success: function(response, opts) {
// How parse the response containing the XML?
}
});
I tried fiddling around with XmlReader but didn't get too far.
I'm really new to Sencha Touch but I've got an XML to read and display ok, the problem I had was that you can't access cross domain xml's (although I've heard if you compile in PhoneGap there is a way), so I put all my files in the same location and parsed the XML with a PHP script on my server (in turn keeping it local). See the example below:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XML Example</title>
<script src="../sencha-touch-debug.js" type="text/javascript">
</script>
<link href="../resources/css/sencha-touch.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
new Ext.Application({
name: 'xmlexample',
launch: function(){
Ext.regModel('Profile', {
fields: ['nobea','nobeb','nodec','noded'] //etc...
});
this.stores.profiles = new Ext.data.Store({
model: 'Profile',
autoLoad:true,
implicitIncludes: true,
proxy: {
type: 'ajax',
url : 'http://www.yourwebsite.co/php/xmlparse.php?url=http://externalxmllink',
reader: {
type : 'xml',
root : 'profile',
record: 'profile'
}
}
});
var productTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="data">{nobea}</div>',
'<div class="data">{nobeb}</div>',
'<div class="data">{nobec}</div>',
'<div class="data">{nobed}</div>',
'</tpl>'
);
new Ext.Panel({
fullscreen: true,
items: new Ext.DataView({
store: this.stores.profiles,
tpl: productTpl,
itemSelector: 'product-selected'
//other config goes here
})
});
}
});
</script>
</head>
<body>
</body>
</html>
So the sample XML file would look like:
<?xml version="1.0" encoding="utf-8"?>
<profile>
<nodea>text</nodea>
<nodeb>text</nodeb>
<nodec>text</nodec>
<noded>text</noded>
</profile>
And here is the xmlparse.php
<?php
// Set your return content type
header('Content-type: application/xml');
// Website url to open
//$daurl = 'http://YOURXMLLINK';
$daurl = $_GET['url'];
// Get that website's content
$handle = fopen($daurl, "r");
// If there is something, read and return
if ($handle) {
while (!feof($handle)) {
$buffer = fgets($handle, 4096);
echo $buffer;
}
fclose($handle);
}
?>
Hope this helps :)
You had a couple of typo's (nobed instead of noded)
This works:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XML Example</title>
<script src="../touch/sencha-touch.js" type="text/javascript"></script>
<link rel="stylesheet" href="../touch/resources/css/sencha-touch.css" />
<script type="text/javascript">
new Ext.Application({
name: 'xmlexample',
launch: function(){
Ext.regModel('Profile', {
fields: ['nodea','nodeb','nodec','noded'] //etc...
});
this.stores.profiles = new Ext.data.Store({
model: 'Profile',
autoLoad:true,
implicitIncludes: true,
proxy: {
type: 'ajax',
url : 'data.xml',
reader: {
type : 'xml',
root : 'profile',
record: 'profile'
}
}
});
var productTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="data">{nodea}</div>',
'<div class="data">{nodeb}</div>',
'<div class="data">{nodec}</div>',
'<div class="data">{noded}</div>',
'</tpl>'
);
new Ext.Panel({
fullscreen: true,
items: new Ext.DataView({
store: this.stores.profiles,
tpl: productTpl,
itemSelector: 'product-selected'
//other config goes here
})
});
}
});
</script>
</head>
<body>
</body>
</html>
加载中,请稍侯......
精彩评论