PDA

View Full Version : Carousel inside a div



ssmweb
22 Sep 2010, 10:09 AM
I'm new to this so this may sound like a very simple question, but it's been troubling me for the past few days. I've downloaded everything and have read through the help manuals and forum and still can't find a simple solution.

All I want to do is be able to create a simple carousel that goes into a div and NOT be fullscreen. (I'm assuming this is done with renderTo)

I took the default carousel example and tried to modify it. I tried to set fullscreen to false, but that killed the script and the carousel wouldn't load at all.

Can somebody point me in the right direction? I just want to create a carousel that fits into a div so that I can adjust the height and width of the div to fit with the rest of the design of the webpage. How do I know if I have the correct ext-touch JS and CSS files and everything else I need?

Thanks,
Ryan

evant
22 Sep 2010, 4:45 PM
Use the renderTo option to specify the element to render to.

ssmweb
23 Sep 2010, 5:27 AM
Use the renderTo option to specify the element to render to.

Yeah, I knew that (as I referenced it in my post), but that doesn't work with the carousel example that I downloaded...? It still shows in fullscreen. And then if I change fullscreen to false, the script doesn't work at all.

evant
23 Sep 2010, 5:36 AM
Well, you haven't posted any code, so it's not really possible to comment.

ssmweb
23 Sep 2010, 5:42 AM
I didn't think I needed to post code because it's part of the downloaded package available to everybody, but here you go anyway:

This is the HTML:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel</title>
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../../ext-touch.js"></script>
<script type="text/javascript" src="index.js"></script>

<style>
body {
background-color: #376daa;
}
.card {
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
padding: 80px 40px;
}

.x-phone .card {
padding: 15px;
font-size: 36px;
}

.card p {
font-size: 24px;
line-height: 30px;
}

.x-phone .card p {
font-size: 16px;
line-height: 18px;
}
</style>
</head>
<body></body>
</html>

And this is the index.js:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

var carousel2 = new Ext.Carousel({
direction: 'vertical',
ui: 'light',
activeItem: 1,
defaults: {
cls: 'card'
},
items: [{
title: 'Tab 1',
html: '<h1>ui="light"</h1>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1, carousel2]
});
}
});

Now, this works fine, but when you change fullscreen: true to fullscreen: false in the Ext.Panel code, the script doesn't work at all.

evant
23 Sep 2010, 5:50 AM
Define "doesn't work"?

Panels won't automatically render if you don't specify them as fullscreen, so you need to call show explicitly.

ssmweb
23 Sep 2010, 5:54 AM
"doesn't work"... just means that nothing displays.

So, if I wanted to display the carousel within a div, would the HTML look like this:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel</title>
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../../ext-touch.js"></script>
<script type="text/javascript" src="index.js"></script>

<style>
body {
background-color: #376daa;
}
.card {
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
padding: 80px 40px;
}

.x-phone .card {
padding: 15px;
font-size: 36px;
}

.card p {
font-size: 24px;
line-height: 30px;
}

.x-phone .card p {
font-size: 16px;
line-height: 18px;
}
</style>
</head>
<body><div ID="carousel"></div></body>
</html>

And then where would the renderTo code go in the .js file?

aconran
23 Sep 2010, 4:03 PM
And then where would the renderTo code go in the .js file?


When you create the Carousel, specify renderTo: 'carousel' as a configuration option. You will also want to provide a width and height since you have not specified one via CSS.

ssmweb
24 Sep 2010, 5:21 AM
It's still being shown in fullscreen and not inside the div. Here's the latest code:

HTML:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel</title>
<link rel="stylesheet" href="ext-touch.css" type="text/css">
<script type="text/javascript" src="ext-touch.js"></script>
<script type="text/javascript" src="index.js"></script>

<style>
body {
background-color: #376daa;
}
.card {
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
padding: 80px 40px;
}

.x-phone .card {
padding: 15px;
font-size: 36px;
}

.card p {
font-size: 24px;
line-height: 30px;
}

.x-phone .card p {
font-size: 16px;
line-height: 18px;
}
#carousel { background:#003366; width:400px; height:300px; }
</style>
</head>
<body><div ID="carousel"></div>
</body>
</html>and JS:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
renderTo: 'carousel',
defaults: {
cls: 'card'
},
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel]
});
}
});

aconran
24 Sep 2010, 8:36 AM
You've put it inside of a Panel with the fullscreen configuration on and have applied a vbox layout with a flex of 1.

Take the additional Panel out and you should get what you're looking for.

ssmweb
24 Sep 2010, 8:42 AM
Hmm... still no luck. If I remove the panel code, the carousel doesn't show at all.

HTML:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carousel</title>
<link rel="stylesheet" href="ext-touch.css" type="text/css">
<script type="text/javascript" src="ext-touch.js"></script>
<script type="text/javascript" src="index.js"></script>

<style>
body {
background-color: #376daa;
}
.card {
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
padding: 80px 40px;
}

.x-phone .card {
padding: 15px;
font-size: 36px;
}

.card p {
font-size: 24px;
line-height: 30px;
}

.x-phone .card p {
font-size: 16px;
line-height: 18px;
}
#carousel { background:#003366; width:400px; height:300px; }
</style>
</head>
<body><div ID="carousel"></div>
</body>
</html>JS:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
renderTo: 'carousel',
defaults: {
cls: 'card'
},
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});
}
});

aconran
24 Sep 2010, 8:58 AM
Provide the width and height in the Carousel definition rather than in CSS.

I'll file a ticket internally that the layout system isnt accounting for width/heights set in CSS.

ssmweb
24 Sep 2010, 9:09 AM
Do I use setWidth and setHeight? And do I include "px" with the number? I tried both with and without but neither worked:

JS code:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
renderTo: 'carousel',
setWidth: '400px',
setHeight: '300px',
defaults: {
cls: 'card'
},
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});
}
});

aconran
24 Sep 2010, 9:24 AM
The configurations are specified in numbers.



width: 400,
height: 300,

ssmweb
24 Sep 2010, 9:35 AM
Finally! Wow, that was a long process. It's working now. Thank you for your help on this.

tsipulia
4 Jan 2011, 5:48 PM
I'm doing exactly the same thing, but I need to adjust the size from iPhone to iPhone4. I wonder if i could use percentage, or maybe an if statement, but everything is giving me an error....


var carousel = new Ext.Carousel({
renderTo: 'carousel',
width: 480,
height: 320,
defaults: {
cls: 'card'
},

listeners: {
cardswitch: function(container, newCard, oldCard, index){
console.log(container, newCard, oldCard, index);
// alert(this.getActiveIndex());

and so on....



i've also tried


var carousel = new Ext.Carousel({
renderTo: 'carousel',
fullscreen: true,
defaults: {
cls: 'card'
},

Please help!