PDA

View Full Version : carousel2 modifications ?



nileshbhd5
30 Jan 2011, 5:21 AM
I recently download Sencha Touch and has tried to make few modifications to carousel2 example

It should display all the xml news one below another like this http://tinyurl.com/49dvhcq

The Js file is as below...


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.getBody().mask('Loading...', 'x-mask-loading', false);
var panel = new Ext.Panel({
fullscreen: true,
layout: 'fit',

});

Ext.regModel('Card', {
fields: ['title', 'catId']
});

var store = new Ext.data.Store({
model: 'Card',
proxy: {
type: 'ajax',
url: 'data.xml',
reader: {
type: 'xml',
record: 'category'
}
},
listeners: {
single: true,
datachanged: function(){
Ext.getBody().unmask();
var items = [];

store.each(function(rec){
items.push({
html: rec.get('title'),
cls: 'category ' + rec.get('catId')
});
});

var carousel = new Ext.Carousel({
items: items,
itemId: 'carousel'
});
panel.add(carousel);
panel.doLayout();
}
}
});
store.read();
}
});

The XML file looks like


<categories>
<category>
<catId>96</catId>
<title>News</title>
</category>
<category>
<catId>97</catId>
<title>Articles</title>
<category>
<catId>101</catId>
<title>Destinations</title>
</category>
</categories>