PDA

View Full Version : 'Pulse' like interface - carousel in carousel



TrentMav
11 Sep 2010, 2:06 AM
Hi,

I am trying to come up with a 'Pulse' (the newsreader for the iPad) like interface with Sencha, and thought I'd share this here, since this forum helped me a great deal to learn Sencha. Kudos to the Devs, great job.

Basically it's panel streams in a two carousels, and I stole the code mostly from this forum entry:
http://www.sencha.com/forum/showthread.php?106970-Non-snapping-Carousel


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'images/icons/app_icon.png',
glossOnIcon: true,
onReady: function(){

var colors = ['00aa00', '993300', '333300', '003300', '003366', '000080', '333399', '333333', '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF']


var items = [];
for (var i = 0; i < colors.length; ++i) {
items.push({
style: 'width: 240px; background-color: #' + colors[i],
html: 'Item ' + i
});
}

var streams = [];

for (var i = 0; i < 5; ++i) {

p = new Ext.Panel({
height: 180,
scroll: 'horizontal',
style: 'background-color: #990099',
layout: {
type: 'hbox',
align: 'stretch'
},
items: items
});
streams.push(p);

}

var body = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
dockedItems: toolbar,
monitorOrientation: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [streams],
});
}
});?


Best,
Trent

PS: I could use a tip on how to make these panels clickable ... in the forum entry above they are clickable via a JS function in the HTML but this doesn't really work well and tends to stick. There must be a Sencha way to do this, I assume.

MrRoyce
15 Dec 2010, 8:39 AM
Hi there, did you ever find a better way to make the panels clickable? The itemTap event seems to only be defined for dataview lists.

TrentMav
15 Dec 2010, 1:38 PM
nope, I didn't ... :-( ... it would be cool if someone with more experience than me could help out.

MrRoyce
15 Dec 2010, 4:30 PM
The kitchensink - touch events demo has an example of extending a component and adding each of the touch/tap/etc events to it. Maybe the panels could be extended in a similar way and the events added to them.

evant
15 Dec 2010, 5:38 PM
Ext.setup({
onReady: function(){
new Ext.Panel({
fullscreen: true,
listeners: {
el: {
tap: function(){
console.log('foo');
}
}
}
});
}
});

Flap
10 Feb 2012, 1:59 AM
hi,

I am new to Sencha and am trying to create an interface like the Pulse news app, with the swiping of the stories.

I know the example above does this but is for Sencha 1. How would I do this in Sencha 2?

Thanks