PDA

View Full Version : Flame bait : need help with tab panel scrolling [solved]



ultramedia
11 Oct 2009, 4:53 PM
Hey everyone,

Got a problem I've been stuck on all morning, can't get scrolling working in a tab panel. It has to be something simple and stupid but I've googled so many variations of 'extjs tab scrolling' that I can't see the woods for the trees anymore. Can anyone tell me what I'm doing wrong?



{
region: 'south',
id: 'south-panel',
title: 'Some Panel Name',
xtype: 'tabpanel',
split: true,
height: 200,
collapsible: true,
margins: '0 5 5 5',
items: [
{
title: 'Debugging',
items: [
new Ext.Panel({
id: 'debugging_panel',
autoScroll: true,
border: false,
html: 'start<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end'
})
]
}
]
}

hendricd
11 Oct 2009, 4:59 PM
@ultramedia - It looks like what we call an 'over-nested layout'
(or a layout without layout:fit') :



{
region: 'south',
id: 'south-panel',
title: 'Some Panel Name',
xtype: 'tabpanel',
split: true,
height: 200,
collapsible: true,
margins: '0 5 5 5',
items: [
{
layout : 'fit', //????
title: 'Debugging',
items: [
new Ext.Panel({
title: 'Debugging',
id: 'debugging_panel',
autoScroll: true,
border: false,
html: 'start<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end'
})
]
......

ultramedia
11 Oct 2009, 5:48 PM
Hey Hendricd,

Thanks for you quick reply, I've made the following modification to my code snippet :



{
region: 'south',
id: 'south-panel',
title: 'My not working tab section',
split: true,
height: 300,
collapsible: true,
margins: '0 5 5 5',
items: [{
xtype: 'tabpanel',
border: false,
activeTab: 0,
items: [{
title: 'Debugging',
id: 'debugging_panel',
border: true,
autoScroll: true,
html: 'start<br><br><br><br><br>end'
}]
}]
}
Hopefully this takes care of the over nesting, but I still have my original problem with scrolling. I've tried every variation of autoHeight and layout: 'fit' on all of the containers above that I can think of. (I took them out again so you could suggest where they should go).

But the border for debugging_panel still refuses to fit to the parent container when the content is smaller than the space it is in, and autoScroll still refuses to activate when the content is larger than the space it is in.

Anyways, I guess I'll take an early lunch, clear my head, and have another go in a little bit.

ultramedia
11 Oct 2009, 6:41 PM
Yay, I got it going! :)

For future weary newbies, this is what works for me now :



{
region: 'south',
id: 'south-panel',
title: 'Ontology',
split: true,
height: 300,
collapsible: true,
margins: '0 5 5 5',
layout: 'fit', // specify layout manager for items below
items: [{
xtype: 'tabpanel',
border: false,
activeTab: 0,
items: [{
title: 'Debugging',
id: 'debugging_panel',
border: false,
autoScroll: true,
html: 'start<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end'
}]
}]
}
The secret is the positioning of the layout property above, I hadn't really understood it properly until I saw the comment I've attached to it in the complex layout example.

ultramedia
11 Oct 2009, 8:22 PM
argh... the saga continues...

The layout: 'fit' thing above only works for me if I only have a single item in the items list below it. But my problem is that I need a toolbar and a scrollable block of HTML to show up inside a tabs content area so that the toolbar does not scroll but the HTML does.

I've written a clean test app from the ground up trying to get this going, and I'm listing the code below. Does my explanation above of what I'm trying to do make sense? Can it be done in ExtJS?



Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = '../ext-3.0.0/resources/images/default/s.gif';
Ext.QuickTips.init();

viewport = new Ext.Viewport({
layout: 'border',
items: [

// center region
{
region: 'center',
id: 'center-panel',
title: 'Test',

html: 'test'
},

// south region
{
region: 'south',
id: 'south-panel',
title: 'South Panel',

split: true,
height: 300,
collapsible: true,
margins: '0 5 5 5',

layout: 'fit',
items: [
{
id: 'Vindictive tab panel',
xtype: 'tabpanel', // done as child of south-panel so that south-panel title shows properly
border: false,
activeTab: 0,
items:[
{
id: 'tab1',
title: 'Test Tab',
layout: 'fit', // Makes first item below (toolbar) fill entire space :(

items: [
new Ext.Toolbar({
id: 'debug_tb',
height: 26, // Trying to tell the toolbar not to fill
frame: true,
margins: '0 0 5 0',
items: [{text: 'Menu Button'}]
}),
{
autoScroll: true, // it mocks me :(
html: 'sdf<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sdf'
}
]
}
]
}
]
}
]
});

});
Any help would be greatly appreciated, this is double ageing me faster than one of those wraith dudes from stargate atlantis

ultramedia
11 Oct 2009, 8:52 PM
Bwuhahahahahaha!!! It mocks me no more!

The vbox layout has set me free \:D/



Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = '../ext-3.0.0/resources/images/default/s.gif';
Ext.QuickTips.init();

viewport = new Ext.Viewport({
layout: 'border',
items: [

// center region
{
region: 'center',
id: 'center-panel',
title: 'Test',

html: 'test'
},

// south region
{
region: 'south',
id: 'south-panel',
title: 'South Panel',

split: true,
height: 300,
collapsible: true,
margins: '0 5 5 5',

layout: 'fit',
items: [
{
id: 'Vindictive tab panel',
xtype: 'tabpanel', // done as child of south-panel so that south-panel title shows properly
border: false,
activeTab: 0,
items:[
{
id: 'tab1',
title: 'Test Tab',
layout:'vbox',
layoutConfig: {
align : 'stretch',
pack : 'start',
},
items: [
new Ext.Toolbar({
id: 'debug_tb',
height: 26,
frame: true,
margins: '0 0 0 0',
items: [{text: 'Menu Button'}]
}),
{
flex: 1,
autoScroll: true, // it mocks me no more :)
html: 'sdf<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sdf'
}
]
},
{
id: 'tab2',
title: 'Test Tab 2',
html: 'mwuhahahaha'
}
]
}
]
}
]
});

});