Sencha Touch no muestra datos XML

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

preguntado el 02 de febrero de 12 a las 11:02

2 Respuestas

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

Respondido 07 Feb 12, 00:02

No answer can be better than this. You deserve +50. - hrishikeshp19

Oye, por favor mira esto ...stackoverflow.com/questions/9563417/…. y tratar de contestar ... - Himanshu

I think your list needs to be bound to a Ext.data.Store not a TreeStore. A NestedList could work with the TreeStore though.

Respondido 05 Feb 12, 03:02

Unfortunately, I've already tried that. But thanks for the note! - Slevin

The code at the link you posted is a little different from what's in the question. I played around with it on jsfiddle and I think the problem with that code is that the xml is invalid so the responseXML is null. Also it'll be easier to debug if you link to the debug version of sencha touch instead of the minified version. dev.sencha.com/deploy/touch/sencha-touch-debug.js - Jason Freitas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.