PDA

View Full Version : fullscreen nestedList as container in tabpanel



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


index.js:
...
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
},{ ...




list.js:

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

evant
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.

tissot
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 ?

evant
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?!?!

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

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

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

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

tissot
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

andycramb
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.

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