Scroll problem in IE with panels inside west Panel (border layout)

[riuslex]

.NET + Extjs Ext3.0 OR Ext 3.2 (i have the same problem in both versions)
windows XP x32


Hello, i am dinamically rendering a couple of panels inside a west panel (in a border layout). Inside this panel, using contentEl (also tried html:'...') and i am having a problem with scrolling the bodies of these smaller panels in IE. It works perfectly in other browsers but not in IE.

I am using the following to generate the panels:



public string getScript()
{
StringBuilder sbs = new StringBuilder();
sbs.Append(string.Format(@"var viewPanel_{0} = new Ext.Panel({{
frame:true,
title: '{1}',
collapsible:true,
html:'",id, title));

sbs.Append(getHtml());
sbs.Append(string.Format(@"',
titleCollapse: true
}});"));
return sbs.ToString();
}
The above will place in the beginning of the file something like this:




<script type="text/javascript">
//<![CDATA[
var viewPanel_panel1 = new Ext.Panel({
frame:true,
title: 'panel1',
collapsible:true,
html:'AAAAAAAAAAAAA.....',
titleCollapse: true
});
var viewPanel_panel2 = new Ext.Panel({
frame:true,
title: 'panel2',
collapsible:true,
html:'AAAAAAAAAAAAA.....',

titleCollapse: true
});

.................................................

I am creating the layout like this:



SPISD.Application.prototype = { //actions = panels above)
createLayout: function(actions) {
this.actionPanel.add(actions);
this.viewport = new Ext.Viewport({
layout: 'border',
items: [
this.topPanel,
this.actionPanel,
this.rightPanel
]
});

Where this.actionPanel is:



this.actionPanel = new Ext.Panel({
id: 'action-panel',
region: 'west',
split: true,
collapsible: true,
collapseMode: 'mini',
hideCollapseTool: true,
width: 220,
minWidth: 220,
border: false,
autoScroll: true,
baseCls: 'x-plain',
cls: 'panel_container',
items: []
});

Everything works ok for all browsers besides IE. In ie when i use the scroll bar the panels move but the HTML content i inserted in them doesn't... So i can see the panels move above the contents(which remain static).



I have attached two printscreens :

1) Is the pscreen with the panels scrolling above their own contents in IE
2) Is the structure as seen in firebug - firefox


Download panels problem.png (http://uploading.com/files/adcaecac/panels%2Bproblem.png/)
Download body_that_doesn't_get_scroll_in_IE.png (http://uploading.com/files/m84884b7/body_that_doesn%2527t_get_scroll_in_IE.png/)


I would like to know if there is any way i could make the body of the panels scroll with their parent container.

Thank you for your patience.

[riuslex]

I have noticed something new:

Using the contentEl:'html ID' property, after the panels would scroll on top of their own content, if I hovered my mouse above the content it would jump into place (tho not always the right one).

Using the html:'' property, if i CLICK on the unmoved content it will jump to the right place. Some sort of refresh/redraw is made on some event like click or focus.

I will try something like

var thisObj = myPanel.getUpdater();
if(thisObj) thisObj.refresh();


And let you know how it went.

[riuslex]

Hello, the problem is partially solved as follows:

In the "createLayout" function posted above i have added this line at the end:


this.actionPanel.body.on("scroll", function() {
setTimeout(function() {
Ext.getCmp('action-panel').show();
}, 50);
});
Initially it was without the setTimeOut but in some IE versions that will block the scroll Bar.

The above will listen to the scroll event on the Container Panel's Body and force a redraw on the Container Panel by using show().

I believe the bug comes from a windows update or something because the menu acts ok on some computers and doesn't on others...all having the same version of IE8.

I have tracked the problem to the ContentPlaceHolder in the master file. If i remove everything from the master and paste it in the aspx file (and removing any reference to the master file) the problem is fixed...

Anyway, i hope this will help anyone who encounters this problem.

[Condor]

IE has a bug with scrolling positioned content. You can fix it by making the scrolling element position:relative.