View Full Version : fullscreen nestedList as container in tabpanel

22 Jul 2010, 4:24 AM
why does this nested List not render as fullscreen:

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
ui: 'light',
animation: {
type: 'slide',
cover: true
defaults: {
scroll: 'vertical'
fullscreen: true,
items: [{
}, {
title: 'Lose',
html: '<h1>Ihre Lose</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4',
xtype: 'container',
layout: 'fit',
items: Lose
},{ ...


var Lose = new Ext.NestedList({
//fullscreen: true, <= if uncommented: Uncaught TypeError: Cannot read property 'ownerDocument' of null
items: [{ ...

22 Jul 2010, 4:28 AM
You can't have a full screen item inside any other item. It has to be the ~outermost~ item.

22 Jul 2010, 4:32 AM
ok, thank you - but why does the nested list not inherit the fullscreen attribute from the outer tabpanel? how can I make it fullscreen ?

22 Jul 2010, 4:34 AM
As I said, you can't. Full screen can only apply to a single item. Full screen means your nested list would size to the size of the browser viewport (ie. covering the tabs). Why would you want to do this, if the list is housed in a tab panel. How do you switch to the other tabs?!?!

22 Jul 2010, 4:56 AM
I would like to use the full panel estate because this looks ugly:

22 Jul 2010, 5:10 AM
You can't mix html and items.

22 Jul 2010, 5:17 AM
deleted the html, but no change. Perhaps I must use another layout directive ?

22 Jul 2010, 5:58 AM
Please post a drop in sample.

22 Jul 2010, 6:36 AM
what do you mean with drop in sample - the sample is still the same as above (without the html: ...). I fear it currently does not work: the thread http://www.sencha.com/forum/showthread.php?102758-TabPanel-(w-TabBar)-and-NestedList-as-Content/ also shows no easy solution

22 Jul 2010, 2:06 PM
I had the same issue when using the TabPanel. I realised that the css for the TabPanel example was selecting the inner elements of the card bodies. I commented these lines out:

/* .x-tabpanel .x-panel-body .x-panel {
padding: 100px 0;
text-align: center;
font-size: 72px;
font-weight: bold;
color: rgba(0,0,0,.2);
text-shadow: rgba(255,255,255,.2) 0 1px 0;
padding: 100px 15%;
.x-phone .x-tabpanel > .x-panel-body .x-panel-body {
padding: 30px 20px;
font-size: 36px;
.x-phone p {
font-size: 16px;
line-height: 18px;

I have an example online (http://www.cramb.org.uk/sencha/dev/bsl_v4/)that may be similar to what you are trying to achieve.

22 Jul 2010, 11:51 PM
@andycramb: Thank you very much - this is the solution: now it works !