PDA

View Full Version : Reading XML data in a List or NestedList



Manu_Fr
24 Jul 2011, 5:27 AM
Hello !

I'm a french student learning Sencha Touch. Since a few days now, I have been trying an example of displaying an xml data using a list or a nestedlist... It should be something very simple but it doesn't work at all.
I read a lot of threads about how to load XML data but I still don't find the solution for me...

Firstly I copied a simple xml tree from the Sencha Touch documentation :

<?xml version="1.0" encoding="UTF-8"?>

<users>
<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>
</users>
and this is my javascript file :


Ext.setup({
onReady: function() {

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

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

var list = new Ext.List({
floating: true,
singleSelect: true,
store: store,
centered: true,
emptyText: 'No XML'
});

list.show();

}
});

If anyone have suggestions...

greetings to all.

jrboddie
24 Jul 2011, 6:21 AM
An itemTpl for the list is required. Also, I would use fullscreen instead of floating. Finally, you do not need list.show();


var list = new Ext.List({
fullscreen : true,
singleSelect : true,
store : store,
itemTpl : '{id} {name} {email}',
centered : true,
emptyText : 'No XML'
});

//list.show();

Manu_Fr
24 Jul 2011, 8:40 AM
Thanks a lot for your help Jrboddie,

Unfortunatly, it still doesn't work but something have changed : now when I'm running the code on my ipad, I have a "loading" page during 2secondes before to have "No xml" displayed. So probably the xml file is loading correctly but not displayed.

I went back on the Sencha Touch documentation API to see the typical exemple of a List : I changed the order of my code : I declared the "store" after the "ItemTpl"... don't know if it have any importance; also in the exemple, even if they declared the list in the fullscreen mode, they added at the end "list.show();"



var list = new Ext.List({
fullscreen : true,
store : store,
itemTpl : '{id} {name} {email}',
emptyText : 'No XML'
});
list.show();

Anyway I still continue to search...

Thank you again for your help

Manu

jrboddie
24 Jul 2011, 9:07 AM
Check the url to your file in the store. The xml document is in the same directory as the script. Here is the complete example:



Ext.setup({
//icon : 'acsoIcon.png',
//tabletStartupScreen : 'tablet_startup.png',
//phoneStartupScreen : 'acsoSplash.png',
glossOnIcon : false,
onReady : function () {

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

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

var list = new Ext.List({
fullscreen : true,
singleSelect : true,
store : store,
itemTpl : '{id} {name} {email}',
centered : true,
emptyText : 'No XML'
});

//list.show();

}
});

Manu_Fr
24 Jul 2011, 9:36 AM
Thank u again for your help and your patience! Finally it's work

The problem was the version of Sencha. With the same code it doesn't work with the 1.0.0 version but work like a charm with the 1.0.1a

For anyone who need, this is the url project :
http://turing.lecolededesign.com/emdurand/sencha/TryXML/index.html

and the full project zipped :
http://turing.lecolededesign.com/emdurand/sencha//TryXML.zip

Greetings to all.