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,814
    Vote Rating
    607
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi