Change the default vertical carousel

**Thierryg** · 20 Jan 2012 2:09 AM

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>

</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.

**mitchellsimoens** · 20 Jan 2012 9:20 AM

How are the vertical ones differentiated from one and another?

**Thierryg** · 23 Jan 2012 6:04 AM

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>

**rdougan** · 23 Jan 2012 10:54 AM

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.

Change the default vertical carousel

Thread Tools

Search Thread

Display

Unanswered: Change the default vertical carousel

Unanswered: Change the default vertical carousel