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

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

<script type=”text/javascript”>

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


/* var itemTemplate = new Ext.XTemplate(
‘<tpl for=”.”>’,

var xmlStore = new{
model: “Person”,
proxy: {
type: ‘ajax’,
url: ‘BirthdayInvitations.xml’,
reader: {
type: ‘xml’,
record: ‘bdayevent’
root: ‘bdayevents’,
autoLoad: true

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

floating: true,
indexBar: true,
width: 350,
height: 370,
centered: true,
modal: true,
hideOnMaskTap: false

var panel = new Ext.TabPanel({
tabBar: {
layout: {
pack: ‘center’
fullscreen: true,
cardSwitchAnimation: ‘slide’,
items: [templist]


For your Info:

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