Sencha Touch读取XML数据

Question

我刚刚开始使用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。它是一样的煎茶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' 
      } 


      ] 
     }); 
    } 
}); 

Answer 1

嘿@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上的数据。我希望这有帮助。 :)

Answer 2

你只需要使用一个Web服务器（或者的EasyPHP WAMP）（XAMP在Linux和MacOS），并访问你的应用程序抛出本地主机/ yourAppDirectory，一切都会好起来