How to parse XML response with Sencha Touch?_问答_开发者

How to parse XML response with Sencha Touch?

开发者 https://www.devze.com 2023-03-17 06:35 出处：网络

Ext.Ajax.request({ url: \'http://bar.c开发者_开发百科om/api/foos/\', success: function(response, opts) {

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>