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，一切都會好起來