View Full Version : How make a Header and Footer not docked

26 Jul 2010, 5:05 AM
Hi, I need make a Header and a Footer, but not docked. I need to make the site feel like a normal page.
My site is composed by a Header(extends Panel), a TabPanel and a Footer(extends Panel).
The Header is common for all tab pages. In the examples the header and footer is always docked.

This is my code:

var header = new ui.Header({});
var footer1 = new ui.Footer1({});
var footer2 = new ui.Footer2({});
var main = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
animation: 'slide',
items: [{
title: 'Page 1',
items: [page1, footer1]
}, {
title: 'Page 2',
items: [page2, footer2]
var content = new Ext.Panel({
layout: 'fit',
width: 320,
height: 520,
scroll: 'vertical',
items: [header, main]

This does not work. I can't view the header.

I'm frustated. Someone can give me a hand ?


26 Jul 2010, 6:49 AM
See the thread with subject: How to make toolbar tabbar scroll


26 Jul 2010, 4:23 PM
As the docs say, a fit layout only allows for a single child item. The info you need is in the thread linked by @meyerovb.