Sencha Touch XML Parsing Issue

Question

I am new to Sencha Touch framework. I tried using the Documentation to make a demo application. I am trying to display records from a XML file and display it in table format. I am not able to understand what I am doing wrong. I am getting the Dock at the top of the screen and a blank page. Below is my code

Index.js

Ext.setup({
onReady: function(){

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

    var store = new Ext.data.Store({
        model: 'User',
        proxy: {
            type: 'ajax',
            url : 'users.xml',
            reader: {
                type: 'xml',
                record: 'user'
            }
        }
    });


    var list = new Ext.List({
        fullscreen: true,

        itemTpl : '{id} {name}',
        grouped : true,
        indexBar: true,

        store: store
    });
    list.show();

    var panel = new Ext.Panel({
        fullscreen: true,
        dockedItems:[
            {
                dock: 'top',
                xtype: 'toolbar',
                title: 'Users'
            }
        ]
    });
}
});

Users.xml

<?xml version="1.0" encoding="UTF-8"?>
<user>
    <id>1</id>
    <name>Ed Spencer</name>
    <email>ed@sencha.com</email>
</user>
<user>
    <id>2</id>
    <name>Abe Elias</name>
    <email>abe@sencha.com</email>
</user>

Please help me... Thanks in advance...

Answer 1

First of all, you will want to get familiar with how to step through the ST source code and set breakpoints, and how to view console output in your browser.

Try this: use sencha-touch-debug.js instead of sencha.js. Then, use your developer console to set a breakpoint in the Ext.data.Store class constructor method. Down near the bottom of the constructor method, you will see the following code:

    } else if (this.autoLoad) {
        Ext.defer(this.load, 10, this, [typeof this.autoLoad == 'object' ? this.autoLoad : undefined]);
    }

This is a hint to you that you need to set the autoLoad attribute on your data store object.

Once you do that, you will be able to see that the datastore's "load" function is called.

Note that if you are using Chrome and trying to load the HTML & XML files locally (instead of from a webserver), you will run into another issue described in [this question]. You will see an error in your javascript console if this is the case.