PDA

View Full Version : Carousel with Toolbar?



peterwphoto
17 Jul 2010, 2:16 PM
I have been trying the last couple of days to combine a carousel and a toolbar. I am able to get them both on the display but only one active.

Does anyone know of a simple way or easier way to create a carousel page with a toolbar?

I am fairly new to all of this but pretty decent with "hacking" the provided code.

I'd appreciate any help. I am just trying to create an ipad version of my website.

nosarious
17 Jul 2010, 2:44 PM
Will the toolbar change for every card in the carousel? Or will the toolbar be active and only the carousel will be changing?

If the latter, then create the toolbar first and then the carousel series second. You may find that examining the code for the Kitchen Sink may be helpful, since the toolbar with 'source' and 'carousel' on it don't change.

If it is the former, I shall have to get back to you. I still haven't quite figured that out. I suspect the way the overlays are handled in the Kiva example may be similar to what you need. Having a toolbar incorporated in an overlay may be similar to having a toolbar incorporated in a carousel card thingie.

peterwphoto
17 Jul 2010, 2:51 PM
So think of the toolbar instead of saying option 1 option 2 etc it would say landscape, portrait etc.

So you wold click an option at the top and it would load all of the cards which make up the carousel.

Does that help at all?

nosarious
17 Jul 2010, 8:58 PM
The trick with this is to delve into a bunch of the examples... and hopefully figure out how to pull out of it what you need.

I've printed so much paper trying to figure out the 'overlay' example only to discover it isn't called 'overlay' in the api. Drives me nuts.

So... what you want is two things. A way to build a list of specific photo types, all photos in the list the same style (landscape, portrait) An array with two values.

Then you also want a way to choose the specific set of photos to populate a series of carousel cards.

You won't find this in one place, but at least two.

For the first step, images into an array, start with the solitaire example. Pablo Cabana used portions of this to work on his project discussed here: http://www.sencha.com/forum/showthread.php?103825-Changing-viewport-scale-at-runtime&p=489736

After creating the way to work with the two image sets, then figure out a way to choose between them.

I would suggest starting with a smaller set of images...

shellgrit
18 Jul 2010, 3:06 PM
Below is an example of a carousel with a toolbar.


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

// Create a Carousel of Items

var browseCarousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
title: 'illustration',
html: '<img src="illustrations/doublebandedplover.jpg" />'
},{
title: 'photo',
html: '<img src="photos/doublebandedplover.png" />'
}]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [browseCarousel],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'light',
items: [{
text: 'Back',
ui: 'back',
handler: function(){
main.setCard(0);
}
},{
text: '\/\\',
ui: 'action',
id: 'prevButton',
disabled: true
},{
text: '\\\/',
ui: 'action',
id: 'nextButton',
disabled: true
}]
}]
});
}
});Hope this helps.

Neil

jep
29 Sep 2010, 12:16 PM
I'm asking the same question as I THINK the original one. I'm trying to have a Carousel that has multiple pages, each with their own toolbar. So here's my example that doesn't work:



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title id="title">test</title>
<link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function(){

var item1 = new Ext.Component({
dockedItems:[{xtype:'toolbar', dock:'top', height:50, title:'Toolbar for item1'}],
html:'<h1>item1</h1>',
style:'background-color:gray'
});

var item2 = new Ext.Component({
dockedItems:[{xtype:'toolbar', dock:'top', height:50, title:'Toolbar for item2'}],
html:'<h1>item2</h1>',
style:'background-color:gray'
});

var carousel = new Ext.Carousel({
items:[item1, item2]
});

var mainPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [carousel]
});

}
});
</script>

</head>

<body></body>

</html>
When run using 0.95 in Safari 5.0.5 in XP, the toolbars never show up. Here's what Safari generates as the HTML:



<body id="ext-gen1002" class=" x-desktop">
<div class="x-body-stretcher" id="ext-gen1003" style="width: 1029px; height: 407px;"></div>

<div id="ext-comp-1008" class=" x-panel x-fullscreen x-landscape" style="width: 1029px; height: 407px;">
<div class="x-panel-body x-layout-fit" id="ext-gen1004" style="width: 1029px; height: 407px; left: 0px; top: 0px;">
<div id="ext-comp-1006" class=" x-carousel x-carousel-dark x-carousel-horizontal x-fit-item" style="height: 407px; left: 0px; top: 0px;">
<div class="x-carousel-body" id="ext-gen1007" style="width: 1029px; height: 407px; left: 0px; top: 0px;">
<div id="ext-comp-1004" class=" x-component x-carousel-item" style="background-color: gray; height: 407px; left: 0px; top: 0px; -webkit-transition-duration: 0ms; -webkit-transform: translate3d(0px, 0px, 0px);">
<h1>item1</h1>
</div>

<div id="ext-comp-1005" class=" x-component x-carousel-item" style="background-color: gray; height: 407px; left: 0px; top: 0px; -webkit-transition-duration: 0ms; -webkit-transform: translate3d(1029px, 0px, 0px);">
<h1>item2</h1>
</div>

<div id="ext-comp-1007" class=" x-carousel-indicator x-carousel-indicator-dark x-carousel-indicator-horizontal">
<span id="ext-gen1008" class=" x-carousel-indicator-active"></span><span id="ext-gen1009"></span>
</div>
</div>
</div>
</div>
</div>
</body>
The toolbars are nowhere to be found. I think it just decided to skip them. Is this just a limitation of the use of toolbars with carousels?

evant
29 Sep 2010, 3:20 PM
Components don't use a DockedLayout by default. You need to use a Panel.

jep
29 Sep 2010, 3:30 PM
Well, that's what I get for simplifying my examples too much. Here's something a lot closer to what I'm actually doing:



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title id="title">test</title>
<link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../ext-touch-debug.js"></script>
<script type="text/javascript">

Ext.CardPage = Ext.extend(Ext.Panel, {
dock:'left',
layout:'vbox',
scroll: {
vertical: true,
bounces: false
},
cls: 'cardBox',
dockedItems:[new Ext.Toolbar({dock:'top', title:'toolbar here'})]
});

Ext.setup({
onReady: function(){

var item1 = new Ext.CardPage({
html:'<h1>item1</h1>',
style:'background-color:gray'
});

var item2 = new Ext.CardPage({
html:'<h1>item2</h1>',
style:'background-color:gray'
});

var carousel = new Ext.Carousel({
items:[item1, item2]
});

var mainPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [carousel]
});

}
});
</script>

</head>

<body></body>

</html>


So here, the toolbar only shows up on the second page. But I'm beginning to think I know why. It's only getting ONE instance of the toolbar, isn't it? I need to create it in the constructor, don't I?

I THINK I got it right, but can you check and tell me if this is the kosher way to do it? This would be my CardPage constructor:



constructor: function(config){
this.dockedItems = [{xtype:'toolbar', dock:'top', title:'toolbar here'}];
Ext.CardPage.superclass.constructor.call(this, config)
}


Look right? It seems to work right.

evant
29 Sep 2010, 4:39 PM
Yep, extend applies everything to the prototype, which means it gets shared across all instances.

jep
29 Sep 2010, 4:40 PM
Thanks again!