Sencha Touch does not display XML Data

Question

I am writing an application with Sencha Touch. So I read a XML file and put the data in a list view. Unfortunately, my app doesn't show any list items. I have no errors in my console log and I've done everything according to the documentation.

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>

The error console says that the XML file is loaded correctly.

You can see my test app here: My Sencha Touch App

ilija139 ilija139 · Accepted Answer · 2012-02-06T20:23:29

Your link doesn't contain the code you have provided. In the link you are using this xml file:

<?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>

Which you can see is invalid. Try grouping them under one element root for example 'items' i.e.:

<?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>

Then what's your real problem is this line:

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

You see you're grouping the list items but you don't provide metric on how to group them. Comment it out and you will get running app.

Also modify your proxy's reader like this:

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

To get them grouped check this http://docs.sencha.com/touch/1-1/#!/api/Ext.List You have example there how to group the items.

Btw Sencha Touch 2 is in beta now, so I suggest use that - learn that instead of 1.1.

Here is your whole working code:

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'
        }
    },
});

Sencha Touch does not display XML Data

2 Answers