PDA

View Full Version : why the scroll of panel disappear in IE7 or IE8



fu90
6 Nov 2009, 11:01 PM
Hello!
I have some question on scroll of panel

The scroll of panel can work well in IE6,but disappear in IE7 or IE8.

Does anyone have any solution to handle this problem?

Thanks and regards

Condor
6 Nov 2009, 11:03 PM
Can you post an example?

fu90
8 Nov 2009, 7:16 PM
Can you post an example?
Thanks for your reply.

Code:
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:Ext.getBody(),
height:200,
width:300,
autoScroll:true,
html:'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaa</br></br></br></br></br></br></br></br></br>'
});
});

Please see attachment for more detail.

Thanks.

Condor
8 Nov 2009, 10:50 PM
1. </br> is invalid HTML. It should be <br />.
2. This displays fine on IE6-8. Are you sure it isn't caused by your own stylesheet?

fu90
9 Nov 2009, 5:06 PM
Thanks Condor ,

I will give you a more complex example,

code as follows:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
layout:'border',
renderTo:Ext.getBody(),
height:300,
items:[
{
id:'centerpanel',
region:'center',
items:[
new PanelChart() //At this position,Everything is OK if I new PanelBodyChart directly
],
autoScroll:true
},{
region:'west',
html:'<div>west</div>',
autoScroll:true,
width:300,
split:true,
collapsible: true,
title:'west'
}
]
});
});
PanelChart=Ext.extend(Ext.Panel,{
PanelChartBodyInstance:null,
constructor:function(_cfg){
if (_cfg==null) _cfg={};
Ext.apply(this,_cfg);
this.PanelChartBodyInstance=new PanelBodyChart();
PanelChart.superclass.constructor.call(this,{
items:[
this.PanelChartBodyInstance
]
})
}
});
PanelBodyChart=Ext.extend(Ext.Panel,{
constructor:function(_cfg){
if(_cfg==null)_cfg={};
Ext.apply(this,_cfg);
PanelBodyChart.superclass.constructor.call(this,{
html:'<div>aaaaaaaaaaaaaaaaaaaaaaa</div>',
border:false,
height:300,
width:4000
})
}
});
</script>
</head>
<body>
</body>
</html>

This example, IE6 is OK,
but the horizontal scroll of panel disappear in IE7-8

Condor
10 Nov 2009, 12:16 AM
This is caused by PanelChart being a panel (which uses overflow:hidden).

Do you really need PanelChart? And if you need it, does it need to be a panel?

It does work if you use a Container instead of a Panel, e.g.

Ext.onReady(function () {
var panel = new Ext.Panel({
layout: 'border',
renderTo: Ext.getBody(),
height: 300,
items: [{
id: 'centerpanel',
region: 'center',
items: [
new PanelChart()
],
autoScroll: true
},{
region: 'west',
html: '<div>west</div>',
autoScroll: true,
width: 300,
split: true,
collapsible: true,
title: 'west'
}]
});
});
PanelChart = Ext.extend(Ext.Container, {
PanelChartBodyInstance: null,
constructor: function (_cfg) {
this.PanelChartBodyInstance = new PanelBodyChart();
PanelChart.superclass.constructor.call(this, Ext.apply({
items: [
this.PanelChartBodyInstance
]
}, _cfg));
}
});
PanelBodyChart = Ext.extend(Ext.Panel, {
constructor: function (_cfg) {
PanelBodyChart.superclass.constructor.call(this, Ext.apply({
html: '<div>aaaaaaaaaaaaaaaaaaaaaaa</div>',
border: false,
height: 300,
width: 4000
}, _cfg));
}
});
ps. Notice the preferred method of calling the superclass constructor.

fu90
11 Nov 2009, 2:11 AM
Thank you very much, Condor !
I used container instead of panel,it can work well.