View Full Version : Why is this code moving off the screen?

8 Feb 2011, 9:44 AM
I have spent the last 12 hours trying to figure this out. I just started yesterday to learn about Sencha Touch and I would appreciate any help I can get. I took the tab panel from the examples and added in a toolbar. This forces the tab panel off the screen. Can someone help me fix this?

icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
fullscreen: true,
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
defaults: {
scroll: 'vertical'
items: [{
title: 'Test',
html: 'Test',
iconCls: 'info',
cls: 'card1'
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card2'

var myToolbar = new Ext.Toolbar({
dock : 'top',
title: 'My Toolbar',
items: []

var myPanel = new Ext.Panel({
dockedItems: [myToolbar, tabpanel],
fullscreen : true