View Full Version : Trouble Adding a Toolbar to Carousel

22 Aug 2011, 2:28 PM
Hello! First post...

I'm building an iPad app for a client using Sencha Touch, and this is my first experience with it (currently a web designer, but WAY back I went to school for Comp. Sci. so I have a background in OOP but I'm RUSTY). I know I've been building this app in an inefficient way (because of the deadline, I don't have time to re-familiarize myself with grasping extending Classes and all that... I will as soon as this project is over, because I'm really enjoying ST).

That said, I have a main, horizontally scrolling carousel, with 17 sections, with anywhere from 1 to 7 "subpages" or panels within them as vertically scrolling carousels. The client wants a toolbar on the top now, and for the life of me, I can't get it one to work. Here's the top-level declarations that I've been messing around with.

var mainPages = new Ext.Carousel({
id: 'mainPages',
fullscreen: true,
layout: {type: 'vbox', align: 'stretch'},
items: [s01, s02, s03, s04, s05, s06, s07, s08, s09, s10, s11, s12, s13, s14, s15, s16, s17],
defaults: { cardSwitchAnimation: 'slide'},
direction: 'horizontal',
height: 748,
indicator: false

var navBar = new Ext.Toolbar({
showAnimation:{ type: 'slide', direction:'down'},
layout: {type: 'vbox', align: 'start', pack: 'end'},
fullscreen: false,
hidden: true,
style:'background:#333; position:absolute; top:0px; left:0px; z-index:20000; width:1024px; height:32px;'

var wrapper = new Ext.Panel({
layout: { type:'vbox', align:'stretch' },
id: 'wrapper',
items: [navBar, mainPages]

I've been trying all sorts of things, but I know I just don't grasp ST well yet. Thoughts I've had:

- does the order of the items: [] matter?
- does it matter whether the declaration for navBar is higher in the code than mainPages, etc.?
- why, based on what I have, when I inspect the page in Chrome is there no div anywhere with the ID of "navbar"? is it because the Carousel type is forcing the layout type for its items (s01, s02, etc.) to be 'card' and it's filling the screen?

I've looked at this page: http://dev.sencha.com/deploy/touch/examples/kitchensink/ and it BASICALLY is doing what I'm trying to accomplish... but I'm curious if anyone can help point out a simple mistake I'm making with my current code, before trying starting over completely using the kitchensink example..

Sorry for the barrage of questions. Any help would be most appreciated! Thanks for reading.