This took me around huge time to do this, As i am a newbie to this complex Framework.
Sencha Touch is used for developing dynamic HTML Mobile Apps.
Even JQueryMobile does the same.

Later i will let you know the difference between JQueryMobile, Sencha.

Following Example demonstrates Populating the XML data into List.

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”viewport” initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;” />
<link rel=”stylesheet” href=”../../resources/css/sencha-touch.css” type=”text/css”>

<title>List</title>
<script type=”text/javascript” src=”../../sencha-touch.js”></script>
<!– <script type=”text/javascript” src=”xmltojson.js”></script>

<script type=”text/javascript” src=”x2j.js”></script>–>

<!– <script type=”text/javascript” src=”src/index.js”></script> –>
<script type=”text/javascript” src=”jquery-1.7.1.min.js”></script>
</head>

<script type=”text/javascript”>

Ext.setup({
onReady: function() {
Ext.regModel(‘Person’, {
fields: [
{name: ‘ename’, type: ‘string’}

]
});

/* var itemTemplate = new Ext.XTemplate(
‘<tpl for=”.”>’,
‘{ename}’,
‘</tpl>’);*/

var xmlStore = new Ext.data.Store({
model: “Person”,
proxy: {
type: ‘ajax’,
url: ‘BirthdayInvitations.xml’,
reader: {
type: ‘xml’,
record: ‘bdayevent’
}
},
root: ‘bdayevents’,
autoLoad: true
});

var templist = new Ext.List( {
title:”xmli”,
itemTpl : ‘{ename}’,

floating: true,
indexBar: true,
width: 350,
height: 370,
centered: true,
store:xmlStore,
modal: true,
hideOnMaskTap: false
}).show();

var panel = new Ext.TabPanel({
tabBar: {
layout: {
pack: ‘center’
}
},
fullscreen: true,
cardSwitchAnimation: ‘slide’,
items: [templist]
});
}
});
</script>

</head>
<body></body>
</html>

For your Info:

regModel: This is Like DAO of the Elements that we are Loading.