1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Rennes - France
    Posts
    172
    Answers
    2
    Vote Rating
    1
    Thierryg is on a distinguished road

      0  

    Default Unanswered: Change the default vertical carousel

    Unanswered: Change the default vertical carousel


    Hi,

    I have followed the example for the sensatouch website :
    http://docs.sencha.com/touch/2-0/touch/examples/carousel/index.html

    I
    was expected to used a two dimention carousel 'cos i have a tiny display (the web application if for an embedded device).

    In fact, at the origin i was looking for tips for a user interface adapted for my qvga LCD . Then, i have think to the SONY devices that manage menu in two dimensions (http://u.speed.free.fr/uspeednews/do...r%20reseau.jpg) that's why i have tried to display one item a time trough carousel.

    Thus i have the following (index.html) :

    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <TITLE>two dimension carousel</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <META http-equiv="Pragma" content="no-cache"/>
    <META http-equiv="Expires" content="-1"/>
    <META http-equiv="cache-control" content="no-cache"/>
    <META content="width=device-width, initial-scale=1" name="viewport"/>
    <LINK type="image/x-icon" rel="icon" href="/favicon.ico"/>
    <LINK type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/>
    <LINK type="text/css" rel="stylesheet" href="resources/css/apple.css"/>
    <SCRIPT type="text/javascript" src="jquery-1.7.1.js" language="javascript"></SCRIPT>
    <SCRIPT type="text/javascript" src="sencha-touch-all.js" language="javascript"></SCRIPT>
    <SCRIPT type="text/javascript" src="webapp.js" language="javascript"></SCRIPT>
    <STYLE>
    <!--
    body {
    background-color: #000;
    top:0;
    left:0;
    margin:0px 0px 0px 0px;
    padding:0px;
    }
    .my-carousel-item {
    background: url(images/loading.png) no-repeat center center;
    }
    input.homeLiveBtn
    {
    font-size:10px;
    font-family:Arial,sans-serif;
    width:80px;
    border-style:outset;
    }
    @media screen and (orientation:portrait) {
    .my-carousel-item-img {
    background-size: 100% auto;
    }
    }
    @media screen and (orientation:landscape) {
    .my-carousel-item-img {
    background-size: auto 100%;
    }
    }
    .x-portrait .my-carousel-item-img {
    background-size: 100% auto;
    }
    .x-landscape .my-carousel-item-img {
    background-size: auto 100%;
    }
    .my-carousel-item-img {
    background-position: center center;
    }
    .x-carousel-indicator > * {
    background-color: orange !important;
    opacity: 0.4;
    }
    .x-carousel-indicator > .x-carousel-indicator-active {
    opacity: 1;
    }
    -->
    </STYLE>
    </HEAD>
    <BODY >
    </BODY>
    </HTML>

    Then, i have start a two dimension caroussel (webapp.js) using sensa touch 2.0 :

    var nbMaxMainScreen = 3;
    var nbMaxSubScreen = 2;
    var nbMaxSubScreenPerMainScreen = Array(3, 4, 3); // Number of sub item per screen
    var mainScreen = new Array(nbMaxMainScreen);
    var vcaroussel = new Array(nbMaxMainScreen);
    var hcarousel;


    function _objectIntrospection(obj)
    {
    var _propList = "";
    for(var propName in obj)
    if(typeof(obj[propName]) != "undefined")
    _propList += (propName + ", ");
    return _propList;
    }


    // ----- Status -----
    mainScreen[0] = new Array(nbMaxSubScreenPerMainScreen[1]);
    mainScreen[0][0] = 'status 1 ';
    // ----------------
    mainScreen[0][1] = 'status 2 ';
    // ----------------
    mainScreen[0][2] = 'status 3 ';


    // ----- Home -----
    mainScreen[1] = new Array(nbMaxSubScreenPerMainScreen[0]);
    mainScreen[1][0] = '<form id="homefrm" name="homefrm" method="POST" action="">',
    mainScreen[1][0] += '<center>',
    mainScreen[1][0] += '<br/><input onclick="javascript:hcarousel.setActiveItem(1).setActiveItem(1)" type="button" id="homeLiveBtn" name="homeLiveBtn" class="homeLiveBtn" value="LIVE" title="">',
    mainScreen[1][0] += '</center>',
    mainScreen[1][0] += '</form>';
    // ----------------
    mainScreen[1][1] = '<form id="homefrm" name="homefrm" method="POST" action="">',
    mainScreen[1][1] += '<center>',
    mainScreen[1][1] += '<br/>LIVE',
    mainScreen[1][1] += '</center>',
    mainScreen[1][1] += '</form>';
    // ----------------
    mainScreen[1][2] = '<form id="homefrm" name="homefrm" method="POST" action="">',
    mainScreen[1][2] += '<center>',
    mainScreen[1][2] += '<br/>STORE',
    mainScreen[1][2] += '</center>',
    mainScreen[1][2] += '</form>';
    // ----------------
    mainScreen[1][3] = '<form id="homefrm" name="homefrm" method="POST" action="">',
    mainScreen[1][3] += '<center>',
    mainScreen[1][3] += '<br/>FORWARD',
    mainScreen[1][3] += '</center>',
    mainScreen[1][3] += '</form>';


    // ----- Settings -----
    mainScreen[2] = new Array(nbMaxSubScreenPerMainScreen[2]);
    mainScreen[2][0] = 'settings 1 ';
    // ----------------
    mainScreen[2][1] = 'settings 2 ';
    // ----------------
    mainScreen[2][2] = 'settings 3 ';


    /*var msg = "";
    var m, n;
    for ( m=0 ; m<nbMaxMainScreen ; m++)
    for ( n=0 ; n<nbMaxSubScreenPerMainScreen[m] ; n++)
    msg += "\n["+m+"]["+n+"]:"+mainScreen[m][n];
    alert("msg"+msg);*/

    Ext.setup(
    {
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    requires:
    [
    'Ext.carousel.Carousel',
    'Ext.Img'
    ],

    onReady: function()
    {
    var horizontalCarousel;
    var verticalCarousels = [];
    var items, i, j;

    /* Vertical items */
    //alert("nbHorizontalItems="+nbMaxMainScreen);
    for ( i=0 ; i<nbMaxMainScreen ; i++ )
    {
    items = [];

    /* Horizontal items */
    //alert("nbVerticalItems="+nbMaxSubScreenPerMainScreen[i]);
    for ( j=0 ; j<nbMaxSubScreenPerMainScreen[i] ; j++ )
    {
    //alert("i="+i+"/j="+j);
    //alert("content["+i+"]["+j+"]="+mainScreen[i][j]);
    items.push(
    {
    html : mainScreen[i][j],
    style: 'background-color: #5E99CC'
    });
    }

    /* Fill vertical's carousel */
    verticalCarousels.push(
    {
    xtype: 'carousel',
    direction: 'vertical',
    directionLock: true,
    items: items,
    itemConfig:
    {
    cls: 'my-carousel-item'
    }
    })

    vcaroussel[i] = verticalCarousels;
    //alert("vcar="+_objectIntrospection(vcaroussel));
    }

    /* Link the vertical carousel with the horizontal one */
    horizontalCarousel = Ext.Viewport.add(
    {
    xtype: 'carousel',
    direction: 'horizontal',
    cardSwitchAnimation: 'slide',
    id: 'hcarouselID',
    items: verticalCarousels
    });
    hcarousel = horizontalCarousel; // Save the handle to the horizontal carousel
    horizontalCarousel.setActiveItem(1); // Enable the home panel by default
    }
    });

    I have configure the default horizontal carousel with : horizontalCarousel.setActiveItem(1);

    Now, i am looking for a way to change the vertical caroussel in javascript but i don't know how to get the verticalCarousel's handle where i can use setActiveItem(1).

    Thanks in adavance of any reply/help.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Answers
    3454
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    How are the vertical ones differentiated from one and another?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Rennes - France
    Posts
    172
    Answers
    2
    Vote Rating
    1
    Thierryg is on a distinguished road

      0  

    Default


    Hi,

    As you can see, in the code i have provided, the content is html and there is not differencies from the horizontal one.

    The carousel can be controlled in the two directions : vertical and horizontal.

    For the default horizontal one, this is done with this line : horizontalCarousel.setActiveItem(1);

    But i wanna control from the content of a carousel, the possibility to switch to another vertical one.

    For the horizontal one, the handle was : horizontalCarousel, but for the vertical one, this is not so easy.

    I have tried : "javascript:hcarousel.setActiveItem(2)" inside a a tag : <a href="">next</a>

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Give the vertical carousel and id and then use Ext.getCmp('your-carousel-id') to get an instance of that carousel, which you can then call setActiveItem on.

    Also, please use [code] tags in future.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Thread Participants: 2