Sencha Touch读取XML数据

时间:2012-06-16 09:21:41

标签: xml sencha-touch extjs4 extjs xmlreader

我刚刚开始使用Sencha Touch 2.0。我在阅读XML数据时遇到问题。我开始使用下载附带的基本“入门”应用程序,它工作正常,这意味着我已正确完成设置。现在我已经做了一些更改来阅读简单的XML,但我无法在屏幕上看到任何数据。以下是我的代码。请帮我解决一下这个。 - 这是app.js文件的内容 -

Ext.Loader.setPath({
    'Ext': 'lib/touch/src'
});

Ext.define('User', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['id', 'name', 'email']
    }
});

var mystore = Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url : 'userData.xml',
        reader: {
            type: 'xml',
            rootProperty: 'users',
            record: 'user'
        }
    }
});  

Ext.application({
    name: 'Sencha',

    launch: function() {
        //The whole app UI lives in this tab panel
        Ext.Viewport.add({
            xtype: 'tabpanel',
            fullscreen: true,
            tabBarPosition: 'bottom',   
            items: [
                // This is the home page, just some simple html
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    scrollable: true,
                    html: [
                        '<img height=260 src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>Building the Getting Started app</p>",
                        '<h2>Sencha Touch (2.0.0)</h2>'
                    ].join("")
                },


                {
                    xtype: 'list',
                    title: 'Events',
                    iconCls: 'star',
                    itemTpl: '{id}',                     
                    store: mystore                    
                }


            ]
        });
    }
});

XML与此app.js文件位于同一位置。请注意,我没有安装任何服务器。我只是对app.js进行了更改,并在chrome浏览器中打开“index.html”。

这是XML。它与Sencha Docs上给出的相同.-

<?xml version="1.0" encoding="UTF-8"?>
<users>
<user>
    <id>112</id>
    <name>Ed Spencer</name>
    <email>ed@sencha.com</email>
</user>
<user>
    <id>248</id>
    <name>Abe Elias</name>
    <email>abe@sencha.com</email>
</user>
</users>

以下是更改后的代码 -

Ext.Loader.setPath({
    'Ext': 'lib/touch/src'
});


Ext.regModel('Personal', {
    fields  : [
        'id',
            {name: 'name',  type: 'string'}, 
            {name: 'email', type: 'string'}
    ]
});


Ext.application({
    name: 'Sencha',

    launch: function() {
        //The whole app UI lives in this tab panel
        Ext.Viewport.add({
            xtype: 'tabpanel',
            fullscreen: true,
            tabBarPosition: 'bottom',   
            items: [
                // This is the home page, just some simple html                                                

            {
                xtype   : 'selectfield',
                name    : 'user',
                label   : 'Users',
                store   : new Ext.data.Store({
                            model       : 'Personal',
                            autoLoad    : true,
                            proxy       : {
                                type    : 'ajax',
                                url     : 'userData.xml',
                                reader  : {
                                    type    : 'xml',
                                    root    : 'users'
                                }
                            }
                        }),
                valueField  : 'name',
                displayField    : 'name'
            }


            ]
        });
    }
});

2 个答案:

答案 0 :(得分:0)

嘿@GordanWebb尝试使用XML文件显示数据

Ext.regModel('Personal', {
    fields  : [
        'id',
            {name: 'name',  type: 'string'}, 
            {name: 'email', type: 'string'}
    ]
}), {
        scroll  : 'vertical',
        items   : [
            {
                xtype   : 'selectfield',
                name    : 'user',
                label   : 'Users',
                store   : new Ext.data.Store({
                            model       : 'Personal',
                            autoLoad    : true,
                            proxy       : {
                                type    : 'ajax',
                                url     : 'userData.xml',
                                reader  : {
                                    type    : 'xml',
                                    root    : 'users'
                                }
                            }
                        }),
                valueField  : 'name',
                displayField    : 'name',
            }
        ]
    }

此示例显示selectfield元素Sencha上的数据。我希望这有帮助。 :)

答案 1 :(得分:0)

你只需要使用一个web服务器(easyphp或wamp)(linux和MacOS上的xampp)并访问你的应用程序抛出localhost /你的目录,一切都会好的