PDA

View Full Version : Panel cut off in tabpanel



hranum
2 Jan 2011, 2:34 PM
Hello!

I have a problem with panels being cut off when included as an item in a tab where layout is set to fit.

The reason why I'm using fit as layout on the tab is because it holds a list, used for navigation to different panels, and as far as I can see, fit is the proper layout to a tab holding a list. When using auto, some of the content, and parts of the scroll indicator is hidden behind the tabs.

Is there a way to set up a tab in a TabPanel so it's suited to hold both a list and a regular panel with text?



Ext.setup({

// app settings

tabletStartupScreen: 'images/tablet_startup.png',
phoneStartupScreen: 'images/phone_startup.png',
icon: 'images/icon.png',
glossOnIcon: true,

onReady: function(){

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',

getGroupString : function(record) {
return record.get('lastName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});

var list = new Ext.List({


itemTpl : '{firstName} {lastName}',
indexBar: false,

store: store
});
list.show();

var list2 = new Ext.List({


itemTpl : '{firstName} {lastName}',
indexBar: false,

store: store
});
list2.show();


FSB = new Ext.Panel({
layout: 'auto',
style: 'background: #fff',
items: [
{
html: 'Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt.'
}
]

});

FSA = new Ext.Panel({
layout: 'fit',
style: 'background: #fff',
items: [
{
html: 'Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt.'
}
]

});

var MTP = new Ext.TabPanel({
ui : 'dark',
flex: 1,
sortable : true,
defaults: {
layout: 'auto',
scroll: 'vertical'
},
tabBar: {
dock: 'bottom'
},
items: [
{
title: 'Tab 1',
html : '1',
cls : 'card1'
},
{
title: 'text, fit',
layout: 'fit',
items: [FSA]
},
{
title: 'text, auto',
layout: 'auto',
items: [FSB]
},{
title: 'list, fit',
id: 'list1',
layout: 'fit',
items: [list]
},{
title: 'list, auto',
id: 'list1',
layout: 'auto',
items: [list]
}
]
});

var MTB = new Ext.Toolbar({
dock : 'top',
title: 'My Toolbar',
items: [
{
text: 'My Button'
}
]
});

var root = new Ext.Panel({

fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [MTP],
dockedItems: [MTB]

});
}
});

evant
2 Jan 2011, 5:55 PM
Don't use an auto layout. If you want the content to fit the size of the tab, use a fit layout.

hranum
2 Jan 2011, 11:44 PM
Sorry if the question/problem was not clear.

I want the panel to be scrollable, inside the tabpanel, so it's possible to see the content that does not fit the tabpanel "viewport". When using layout: fit, the content is being cut off.

steve1964
3 Jan 2011, 3:35 AM
Set the height of the panel, height: '100%'

hranum
3 Jan 2011, 3:45 AM
Set the height of the panel, height: '100%'
When using layout: 'fit'? I tried it and it did not make any difference in my example, as far as I could see.

steve1964
3 Jan 2011, 3:48 AM
Remove the layout: 'fit' and set height:'100%'

hranum
3 Jan 2011, 4:34 AM
Hmm. Seems like I'll have to remove fit as the default layout type for the tab panel as well, for this to work. And then I can't get the list do display correctly.

What I try to set up is this structure:

Tabpanel
- Tab
-- Card layout panel
--- List
--- Basic panel with text or a form.
- More tabs
- More tabs

That's basically what I'm looking for. Although the card layout panel is not included in the code example in my first post. It's pretty basic, but I'm stuck.

steve1964
3 Jan 2011, 4:44 AM
Use the card layout in the tabpanel...

hranum
3 Jan 2011, 6:29 AM
Yes, I do know what layout types to use. At least I think I do. My problem is that the content of the panels the card panel holds is being cut off. I've reproduced the error that I'm actually having in the app I'm developing, as an example. In the example it's a carousel instead of a panel with card layout, but the issue I'm having is the same. It's scrollable, but the content that does not show initially is not displayed when scrolling. So, apparently, it is not an issue with the tab panel, but the card layout.



Ext.setup({

// app settings

tabletStartupScreen: 'images/tablet_startup.png',
phoneStartupScreen: 'images/phone_startup.png',
icon: 'images/icon.png',
glossOnIcon: true,

onReady: function(){

var FSA = new Ext.Panel({
height: '100%',
style: 'background: #fff',
items: [
{
html: 'Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt.'
}
]

});


var FSB = new Ext.Panel({
height: '100%',
style: 'background: #fff',
items: [
{
html: 'Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt.'
}
]

});

var MCL = new Ext.Carousel({
layout: 'card',
items: [ FSA, FSB ]
});

var MTB = new Ext.Toolbar({
dock : 'top',
title: 'My Toolbar',
items: [
{
text: 'My Button'
}
]
});

var root = new Ext.Panel({

fullscreen: true,
layout: {
type: 'fit'

},
defaults: {
scroll: 'vertical'
},
items: [MCL],
dockedItems: [MTB]

});
}
});

steve1964
3 Jan 2011, 7:11 AM
This is working for me:


Ext.setup({

// app settings
tabletStartupScreen: 'images/tablet_startup.png',
phoneStartupScreen: 'images/phone_startup.png',
icon: 'images/icon.png',
glossOnIcon: true,

onReady: function () {

var FSA = new Ext.Panel({
height: '100%',
scroll: 'vertical',
style: 'background: #fff',
items: [{
html: 'Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt.'
}]

});


var FSB = new Ext.Panel({
height: '100%',
scroll: 'vertical',
style: 'background: #fff',
items: [{
html: 'Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt. Ut quis erat nec mauris tincidunt imperdiet ut tempor nisi. Morbi sodales velit arcu. Nam ac mauris fringilla mauris tincidunt tempor et non velit. Fusce ligula quam, tempor porta facilisis non, dictum non augue. Curabitur id dui nec metus dapibus condimentum et a odio. Maecenas quam nisl, elementum ut iaculis ac, blandit sit amet massa. Curabitur convallis pharetra massa, sed tempus augue egestas quis. Integer ultrices, erat in molestie hendrerit, tortor tortor aliquet dui, quis iaculis est lorem a dolor. Curabitur interdum, lacus quis lacinia consectetur, urna lectus ullamcorper leo, vitae gravida ipsum ligula nec mi. Integer mauris urna, luctus sit amet sagittis sed, sodales nec arcu. Donec hendrerit, risus sit amet faucibus consectetur, velit tellus fringilla felis, ac vehicula mi massa nec eros. Vestibulum erat mi, tristique at porta sit amet, dictum quis diam. Donec diam ligula, placerat eget dignissim id, fringilla luctus arcu. Pellentesque vel nisl dolor. Cras rhoncus vestibulum tincidunt.'
}]

});

var MCL = new Ext.Carousel({
items: [FSA, FSB]
});

var MTB = new Ext.Toolbar({
dock: 'top',
title: 'My Toolbar',
items: [{
text: 'My Button'
}]
});

var root = new Ext.Panel({

fullscreen: true,
layout: {
type: 'card'

},
items: [MCL],
dockedItems: [MTB]

});

}
});

hranum
3 Jan 2011, 7:46 AM
Brilliant! Thanks a lot! Sorry for wasting your time on such a foolish mistake, I was missing scroll: 'vertical' on the panel with text. Guess it was the parent panel that was scrolling.