I am starting a new project and just a little confused on how to lay this out. Based on one of the tab bar layout examples I started with that. I have these different screens, for this example we will say 5. Using the card layout I have this so far.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>

<link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript" src="../ext-touch-debug.js"></script>
<script type="text/javascript" src="index.js"></script>

</head>
<body>

<div id="card1">
<h1>Card 1</h1>

</div>

<div id="card2">
<h1>Card 2</h1>

</div>

<div id="card3">
<h1>Card 3</h1>

</div>

<div id="card4">
<h1>Card 4</h1>

</div>

<div id="card5">
<h1>Card 5</h1>

</div>

</body>
</html>

And here is the js...

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'Card 1 Title',
iconCls: 'time',
cls: 'card1',
contentEl: 'card1'
}, {
title: 'Card 2 Title',
iconCls: 'team',
cls: 'card2',
contentEl: 'card2'
}, {
title: 'Card 3 title',
cls: 'card3',
iconCls: 'download',
contentEl: 'card3'
}, {
title: 'Card 4 Title',
cls: 'card4',
iconCls: 'settings',
contentEl: 'card4'
}, {
title: 'Card 5 Title',
cls: 'card5',
iconCls: 'user',
contentEl: 'card5'
}
]
});
}
});


So far so good. My question is how can I add a nice bar to the top that will have the title of each "card". The other question is how can I load these "cards" via ajax. Right now all of this content is pretty static but if each of these card divs had the actual content this thing would take forever to load.