'Pulse' like interface - carousel in carousel

[TrentMav]

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/showthre...pping-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]

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]

nope, I didn't ... :-( ... it would be cool if someone with more experience than me could help out.

[MrRoyce]

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]

Ext.setup({
    onReady: function(){
        new Ext.Panel({
            fullscreen: true,
            listeners: {
                el: {
                    tap: function(){
                        console.log('foo');
                    }
                }
            }
        });
    }
});

[Flap]

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