Combining toolbars at top and bottom with a carousel

[Caspar]

Hello everyone,

i've got a problem combining 2 toolbars (top and bottom of the screen) with a carousel in the middle. Preferable the carousel would automaticly take the hole space inbetween, maybe someone could point me to a way to solve it?


Ext.setup(
{
tabletStartupScreen: '/images/tablet_startup.png',
phoneStartupScreen: '/images/phone_startup.png',
icon: '/images/icon.png',
icon_carousel: '/images/icon_carousel.png',
glossOnIcon: false,

onReady: function()
{
var tapHandler = function(button, event)
{
var txt = "User tapped the '" + button.text + "' button.";
Ext.getCmp('toolbartxt').update(txt);
};

new Ext.Panel(
{
fullscreen: true,
items: [
{
xtype: 'toolbar',
layout:
{
pack: 'center'
},
dock: 'top',
items: [
{
xtype: 'segmentedbutton',
items: [
{
text: 'Leicht',
handler: tapHandler
},
{
text: 'Normal',
pressed : true,
handler: tapHandler
},
{
text: 'Schwer',
handler: tapHandler
}]
}]
},
{
xtype: 'carousel',
layout: 'fit',
height: 250,
items: [
{
title: 'Bild 1',
html: 'a<br>a'
},
{
title: 'Bild 2',
html: 'b<br>b'
}]
},
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'light',
layout:
{
pack: 'center',
},
items: [
{
text: 'Puzzlen!',
ui: 'action',
handler: tapHandler
}]
}]
});
}
});

The moment i delete the "height" from the carousel it stops showing at all and the bottom bar is directly below the topbar/carousel and should be at the very bottom of the screen - "dock: 'bottom'" isn't working like it does in the toolbar only excample page.

Thank you for your help!

PS: the taphandler is just from the excample page, ignore it please it will get changed after i get the layout right.

[mitchellsimoens]

You need to have a Panel (or Carousel) with the dockedItems having the two toolbars. You should give the Panel layout : 'fit' and in the items array have the caorusel. That will make the carousel span the entire width and height that docked items haven't taken up.

[Caspar]

Thank you very much for the response, i solved it by forgetting about dockeditems and just used "flex: 1" to stretch it to the hole height.

Now i run into another problem, what if i want to have the hole screen slide to the left and revealing another screen (with the puzzle on it dynamically created) after pressing the "Puzzle!" button at the bottom? Is it possible to somehow wrap another TabPanel around my layout?


Ext.setup({
tabletStartupScreen: 'images/tablet_startup.png',
phoneStartupScreen: 'images/phone_startup.png',
icon: 'images/icon.png',
glossOnIcon: false,


onReady: function()
{
var difficulty = 2;
var picture = 1;

var tapHandler = function(button, event)
{
switch(button.text)
{
case 'Leicht':
difficulty = 1;
break;
case 'Normal':
difficulty = 2;
break;
case 'Schwer':
difficulty = 3;
break;
case 'Puzzlen!':
switch(difficulty)
{
case 1:
console.log('Action! 1 '+picture);
break;
case 2:
console.log('Action! 2 '+picture);
break;
case 3:
console.log('Action! 3 '+picture);
break;
};
break;
}
};


var panel = new Ext.Panel(
{
fullscreen: true,
layout:
{
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'toolbar',
layout:
{
pack: 'center'
},
items: [
{
xtype: 'segmentedbutton',
items: [
{
text: 'Leicht',
handler: tapHandler
},
{
text: 'Normal',
pressed : true,
handler: tapHandler
},
{
text: 'Schwer',
handler: tapHandler
}]
}]
},
{
xtype: 'carousel',
flex: 1,
listeners:
{
cardswitch: function(container, newCard, oldCard, index)
{
switch(newCard.id)
{
case 'Bild01':
picture = 1;
break;
case 'Bild02':
picture = 2;
break;
}
}
},
padding: '20px',
items: [
{
title: 'Bild 1',
id: 'Bild01',
html: '<p><img src="images/freda01.jpg" alt="Freda 01"></p>'
},
{
title: 'Bild 2',
id: 'Bild02',
html: '<p><img src="images/freda02.jpg" alt="Freda 02"></p>'
}]
},
{
xtype: 'toolbar',
ui: 'light',
layout:
{
pack: 'center',
},
items: [
{
text: 'Puzzlen!',
ui: 'action',
handler: tapHandler
}]
}]
});
}
});