Sencha Touch不顯示XML數據

Question

我正在使用Sencha Touch編寫應用程序。所以我讀了一個XML文件並將數據放在列表視圖中。不幸的是，我的應用程序不顯示任何列表項。我在控制檯日誌中沒有錯誤，並且根據文檔完成了所有工作。

app.js：

FRANF = new Ext.Application({ 
name: 'FRANF', 
useLoadMask: true, 
launch: function() { 

    FRANF.homescreenList = new Ext.List({ 
     store: FRANF.ListStore, 
     itemTpl: '<div>{id} {name}</div>' 
    }); 

    FRANF.homescreenListToolbar = new Ext.Toolbar({ 
     id: 'homescreenToolbar', 
     title: 'FRA NF' 
    }); 

    FRANF.homescreenListContainer = new Ext.Panel({ 
     id : 'itemListContainer', 
     layout : 'fit', 
     html: 'This is the notes list container', 
     dockedItems: [FRANF.homescreenListToolbar], 
     items: [FRANF.homescreenList]  
    }); 

    FRANF.viewport = new Ext.Panel({ 
     fullscreen : true, 
     layout : 'card', 
     cardAnimation : 'slide', 
     items: [FRANF.homescreenListContainer] 
    });  
} 
}); 

index.js：

Ext.regModel('Contact', { 
    fields: ['id', 'name'] 
}); 

FRANF.ListStore = new Ext.data.TreeStore({ 
    model: 'Contact', 
    autoLoad: true, 
    proxy: { 
     type: 'ajax', 
     url : 'homescreen.xml', 
     reader: { 
      type: 'xml', 
      root: 'items', 
      record: 'item' 
     } 
    } 
}); 

XML：

<?xml version="1.0" encoding="UTF-8" ?> 
<items> 
    <item> 
     <id>main-contacts</id> 
     <name>Kontakte FRA NF</name> 
    </item> 
    <item> 
     <id>important-numbers</id> 
     <name>Lufthansa-Nummern A-Z</name> 
    </item> 
    <item> 
     <id>who-does-what</id> 
     <name>Was finde ich wo?</name> 
    </item> 
</items> 

錯誤控制檯說，XML文件加載正確。

你可以看到我的測試應用程序的位置：My Sencha Touch App

Answer 1

您的鏈接不包含您提供的代碼。在您使用此xml文件的鏈接中：

<?xml version="1.0" encoding="UTF-8"?> 
<item> 
    <mail>1</mail> 
    <name>Ed Spencer</name> 
</item> 
<item> 
    <mail>2</mail> 
    <name>Abe Elias</name> 
</item> 

您可以看到的是無效的。嘗試一個元素的根目錄下將它們分組，例如「項目」，即：

<?xml version="1.0" encoding="UTF-8"?> 
<items> 
    <item> 
     <mail>1</mail> 
     <name>Ed Spencer</name> 
    </item> 
    <item> 
     <mail>2</mail> 
     <name>Abe Elias</name> 
    </item> 
</items> 

那麼什麼是你真正的問題是這一行：

franf.homescreenList = new Ext.List({ 
      id: 'homescreenitems', 
      store: franf.homescreenItemsStore, 
      grouped: true,      // <- this Line 
      itemTpl: '<div class="item">{mail} {name}</div>' 
     }); 

你看你的分組列表中的項目，但你不提供如何對它們進行分組的度量。評論它，你會得到運行的應用程序。

還可以修改你的代理服務器的讀者是這樣的：

reader: { 
      type: 'xml', 
      record: 'item', 
      root: 'items' 
     } 

爲了讓他們分組檢查這個http://docs.sencha.com/touch/1-1/#!/api/Ext.List你比如有如何分組的項目。

Btw Sencha Touch 2現在處於測試階段，所以我建議使用它 - 學習而不是1.1。

這是你的整個工作代碼：

franf = new Ext.Application({ 
    name: 'franf', 
    useLoadMask: true, 
    launch: function() { 

     franf.homescreenList = new Ext.List({ 
      id: 'homescreenitems', 
      store: franf.homescreenItemsStore, 
      // grouped: true, 
      itemTpl: '<div class="item">{mail} {name}</div>' 
     }); 

     // Header Toolbar erzeugen 
     franf.homescreenListToolbar = new Ext.Toolbar({ 
      id: 'homescreenToolbar', 
      title: 'FRA NF' 
     }); 

     // Fullscreen Panel erzeugen 
     franf.homescreenListContainer = new Ext.Panel({ 
      id : 'itemListContainer', 
      fullscreen: true, 
      layout : 'fit', 
      dockedItems: [franf.homescreenListToolbar], 
      items: [franf.homescreenList]  
     }); 
    } 
}); 

Ext.regModel('Items', { 
    fields: ['mail', 'name'] 
}); 

franf.homescreenItemsStore = new Ext.data.Store({ 
    model: 'Items', 
    autoLoad: true, 
    proxy: { 
     type: 'ajax', 
     url : 'homescreen.xml', 
     reader: { 
      type: 'xml', 
      record: 'item', 
      root: 'items' 
     } 
    }, 
}); 

Answer 2

我覺得你的列表需要綁定到一個Ext.data.Store不是TreeStore。但是NestedList可以和TreeStore一起工作。