1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    TrentMav is on a distinguished road

      0  

    Default 'Pulse' like interface - carousel in carousel

    'Pulse' like interface - carousel in carousel


    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

    Code:
    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.

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Posts
    35
    Vote Rating
    1
    MrRoyce is on a distinguished road

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    TrentMav is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    35
    Vote Rating
    1
    MrRoyce is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,917
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Code:
    Ext.setup({
        onReady: function(){
            new Ext.Panel({
                fullscreen: true,
                listeners: {
                    el: {
                        tap: function(){
                            console.log('foo');
                        }
                    }
                }
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    Flap is on a distinguished road

      0  

    Default


    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

Similar Threads

  1. Carousel in Carousel
    By freshface in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 2
    Last Post: 13 Sep 2010, 9:49 PM
  2. How to have more than one carousel.js
    By drossmedia in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 11 Aug 2010, 1:14 PM
  3. !Question about Carousel in Carousel...
    By yCD in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 31 Jul 2010, 9:51 AM
  4. [OPEN] [FIXED-110] Carousel indicator breaks down after changing carousel content.
    By Mphasize in forum Sencha Touch 1.x: Bugs
    Replies: 6
    Last Post: 1 Jul 2010, 11:41 AM
  5. Carousel
    By doron447 in forum Ext: Q&A
    Replies: 8
    Last Post: 9 Jul 2009, 1:25 AM

Thread Participants: 3