PDA

View Full Version : Problem with split view port and IE6



ortizSWF
18 May 2009, 12:43 PM
Hello all,

I have a problem with this piece of code, It is a view port component with the split property to true (split:true).
I did some tests on IE7 and IE6 but the split bar only works for IE7.

Any help will be apreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Extjs/resources/css/ext-all.css">
<script type="text/javascript" src="Extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Extjs/ext-all.js"></script>
<script language="JavaScript">
Ext.onReady(function(){
var viewport = new Ext.Viewport({
id: 'adminViewport',
layout: 'border',
items: [{
region: 'north',
height: 25,
items: [new Ext.Panel({})]

}, {
region: 'east',
id: 'idEastSide',
collapsible: true,
split: true,
width: 320,
layout: 'fit',
margins: '0 5 0 0',
items: [new Ext.Panel({})]

}, {
region: 'center',
items: [new Ext.Panel({})]

}]
});
});
</script>
<title>Split Issue</title>
</head>
<body>

</body>
</html>

I have attached screenshots to explain this better.

Animal
19 May 2009, 12:08 AM
Why the overnest?

Why are you putting Panels INSIDE the region Panels?

ortizSWF
19 May 2009, 7:02 AM
Why the overnest?

Why are you putting Panels INSIDE the region Panels?


I know that this is not a good peace of code and this is wrong (sorry), the region panel is a panel itself.


well... I removed the nested panel, but that does not solve my problem. do you have any idea?.

The split bar, works fine in IE7 and Mozilla, but it has problems in IE6

This is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="Extjs/resources/css/ext-all.css">
<script type="text/javascript" src="Extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Extjs/ext-all.js"></script>
<script language="JavaScript">
Ext.onReady(function(){
var viewport = new Ext.Viewport({
id: 'adminViewport',
layout: 'border',
items: [{
region: 'north',
height: 25

}, {
region: 'east',
id: 'idEastSide',
collapsible: true,
split: true,
width: 320,
layout: 'fit',
margins: '0 5 0 0'

}, {
region: 'center'

}]
});
});
</script>
<title>Split Issue</title>
</head>
<body>

</body>
</html>

Thanks in advance.

Animal
19 May 2009, 7:07 AM
I fixed your example so that everyone can drop it unchanged into examples/grid.

It runs fine for me on IE6:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var viewport = new Ext.Viewport({
id: 'adminViewport',
layout: 'border',
items: [{
region: 'north',
height: 25
}, {
region: 'east',
id: 'idEastSide',
collapsible: true,
split: true,
width: 320,
layout: 'fit',
margins: '0 5 0 0'
}, {
region: 'center'
}]
});
});
</script>
<title>Split Issue</title>
</head>
<body>

ortizSWF
19 May 2009, 10:48 AM
Now it works, thanks for your time.