PDA

View Full Version : Carousel Indicator not visible with Toolbar - incorrect sizing?



willai
7 Jan 2012, 7:00 AM
Hi,

I want to place a toolbar and a carousel component in a single container using Sencha Touch 2 PR3 (see code below).

Both components are being displayed as desired, but the indicator of the carousel cannot be seen on the screen. As soon as I remove the toolbar, the indicator is visible.

Am I doing something wrong, or does the sizing of the components of the container not work properly yet in Sencha Touch 2 PR3? This assumption is based on the fact, that if I force a height of say 100pxl on the carousel, the indicator is visible again.


launch: function() {
Ext.create("Ext.Container", {
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'toolbar',
title: 'MyToolbar',
docked: 'top'
},
{
xtype: 'carousel',
//height: '100',
items: [
{
xtype: 'button',
height: '50',
text: 'button 1'
},
{
xtype: 'button',
height: '50',
text: 'button 2'
}
]
},

]
});
}

The HTML-File:

<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


<title>SimpleTest</title>

<link rel="stylesheet" href="../touch/resources/css/sencha-touch.css" type="text/css">

<script type="text/javascript" src="../touch/sencha-touch-all-debug-w-comments.js"></script>
<script type="text/javascript" src="app/app.js"></script>

</head>

Thanks in advance for your answers - any help or indication is welcome :)

mitchellsimoens
7 Jan 2012, 7:19 AM
With PR3, this is working no problems for me in Chrome and iOS simulator (I added flex to give the carousel a height):


Ext.create("Ext.Container", {
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'toolbar',
title: 'MyToolbar',
docked: 'top'
},
{
xtype: 'carousel',
//height: '100',
flex : 1,
items: [
{
xtype: 'button',
height: '50',
text: 'button 1'
},
{
xtype: 'button',
height: '50',
text: 'button 2'
}
]
}
]
});

willai
7 Jan 2012, 7:47 AM
Jeee... that does the job... :D

Thank you very much - I tried playing around with flex, but this I haven't tried.