PDA

View Full Version : scrollbars overlap panel headers



amajedi
16 Aug 2011, 4:07 PM
I have a panel with the following config:



layout: 'anchor',
id: 'leftPanel',
region:'west',
autoScroll: true,
collapsible: false,
border: false,
split:false,
margins: '0 0 0 0',
width: 280,
minSize: 100,
maxSize: 500,
items: [PanelA,PanelB, PanelC, PanelD, PanelE]

And whenever PanelD or PanelE are expanded, they don't have enough room vertically so a scrollbar pops up on the right hand side of the containing panel, the only problem is after the scrollbar is inserted, the width of the scrollbar obscures the panels underneath. :-/

skirtle
16 Aug 2011, 6:00 PM
Try changing the layout to:


layout: {
bindToOwnerCtContainer: true,
type: 'anchor'
}

amajedi
16 Aug 2011, 7:22 PM
nope didn't work. The scrollbar still appears within the containing panel and covers up the little collapse/expand buttons.

skirtle
17 Aug 2011, 7:51 AM
Could you include a screenshot or a complete test case? For what it's worth, here's the one I used where my suggestion fixed it:


new Ext.panel.Panel({
autoScroll: true,
collapsible: false,
height: 300,
renderTo: Ext.getBody(),
title: 'Outer',
width: 300,
items: [
{
collapsed: true,
collapsible: true,
height: 200,
title: 'Panel 1'
}, {
collapsed: true,
collapsible: true,
height: 200,
title: 'Panel 2'
}
],
layout: {
bindToOwnerCtContainer: true,
type: 'anchor'
}
});

amajedi
17 Aug 2011, 12:04 PM
Here is a full representation of what's going on:


new Ext.Viewport({
layout: 'border',
title: 'My Title',
split: false,
items: [{
layout: 'anchor',
id: 'leftPanel',
region:'west',
autoScroll: true,
collapsible: false,
border: false,
split:false,
margins: '0 0 0 0',
width: 280,
minSize: 100,
maxSize: 500,
items: [PanelA,PanelB, PanelC, PanelD, PanelE]
}, rightPanel ],
renderTo: Ext.getBody()
});


Some of the panels within leftPanel are set to have layout: 'anchor'
I hope that helps

skirtle
17 Aug 2011, 3:26 PM
Could you please take 5 minutes to reformat your code before you post, that's totally unreadable.

Exactly which version of ExtJS are you using? Using your code with 4.0.2 or 4.0.5 I got it working just by adding bindToOwnerCtContainer: true. Try using your example code above but with PanelA - PanelE each set to:


{
collapsed: true,
collapsible: true,
height: 300,
title: 'Panel 1'
}

That'll at least allow us to rule some things in and out.

A few tangential suggestions. The preferred name for a viewport is Ext.container.Viewport. You also shouldn't include a renderTo on a viewport, it'll do that automatically. You've got a few other options that you don't need too: both instances of split: false can go, as can collapsible: false, margins: '0 0 0 0', minSize: 100 and maxSize: 500.

amajedi
18 Aug 2011, 9:14 AM
I'm using ext js version 3.4.0 and sorry about the formatting.

I've also noticed the problem manifests itself in another way as well. When I try my application using a lower resolution so the side panel is forced to render a scroll bar, everything looks fine, the panel headers are flush against the scroll bar. After I collapse the panels, the scrollbar goes away except there retains a vertical white bar between my left side panel and right main viewing panel. Upon resize of the browser window, everything corrects itself.

Below are the definitions for panels A through E.



var PanelA = new Ext.Panel({
id: 'PanelA',
title: 'TheTitle',
collapsible: false,
collapsed: false,
padding: 10,
html: '<div id="footer" style="width: 100%;text-align: center"><div style="display: inline-block;"><img src="project_files/img1.png"></div> </div>'
});

var PanelB = new Ext.Panel({
title: 'TheTitle',
items: [PanelAB],
padding: 10,
layout: 'anchor',
collapsible: true,
defaults: {
anchor: '100%'
}
});

var PanelC = new Ext.Panel({
title: 'Layers',
layout: 'anchor',
padding: 5,
collapsible: true,
collapsed: false,
items: [options, tree],
defaults: {
anchor: '100%'
}
});

var PanelD = new Ext.Panel({
id: 'PanelD',
title: 'TheTitle',
collapsible: true,
collapsed: true,
html: "<p style=\"font-family: helvetica; font-size: small;\">" + text + "<br><br> </p>"
});

var PanelE = new Ext.Panel({
id: 'PanelE',
title: 'TheTitle',
collapsible: true,
collapsed: true,
html: "<p style=\"font-family: helvetica; font-size: small;\">" + text + "<br><br> </p>"
});

skirtle
18 Aug 2011, 10:03 AM
This is an Ext 4 forum, not Ext 3.

I just switched my own test case across from Ext 4 to Ext 3. bindToOwnerCtContainer doesn't exist so, as you say, it doesn't fix it. Instead I just attached expand and collapse listeners to all of my child panels (PanelA - PanelE in your case) and in each one I called doLayout() on the west region. That fixed it for me.


listeners: {
collapse: function() {
var west = ...; // get the west region
west.doLayout();
},
expand: function() {
var west = ...; // get the west region
west.doLayout();
}
}

amajedi
18 Aug 2011, 12:28 PM
wow thanks for your help, it fixed it. I feel like such a noob...I just got into web development so its been a slow and grueling process to get anything working right.

skirtle
18 Aug 2011, 12:36 PM
I just got into web development so its been a slow and grueling process to get anything working right.

My number one piece of advice for anyone starting out in ExtJS is to learn JavaScript properly. Trying to get by using knowledge from other languages doesn't work: get a book and read it.

Good luck.