PDA

View Full Version : Accordion + Infopanel, Pin problem



jexxi
19 Jul 2007, 10:29 PM
Hi,
I'm using user Accordion+Infopanel created by Saki.
Here are 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="../lib/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-ux-accordion.css">
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-ux-highlight.css">
<!--<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>-->

<script type="text/javascript" src="../lib/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../lib/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>


<script type="text/javascript" src="../lib/ext/Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="../lib/ext/Ext.ux.Accordion.js"></script>

<script type="text/javascript">
test = function() {
return {
init: function() {

// create accordion
var acc = new Ext.ux.Accordion('div-west', {
fitContainer: true,
fitToFrame: true,
body: 'acc-sports'
})

var panel1 = acc.add(new Ext.ux.InfoPanel({
title: 'Panel 1',
id: 'panel-1',
showPin: 'true',
autoCreate: {
tag: 'div'
}
}));
panel1.update(
'<div class="text-content">This panel has configuration option <b>autoScroll:true</b> which means that when it is undocked and resized to size smaller than the content the croll bars appear. This option is off by default.</div>'
);

var panel2 = acc.add(new Ext.ux.InfoPanel({
title: 'Panel 2',
id: 'panel-2',
showPin: 'true',
autoCreate: {
tag: 'div'
}
}));
panel2.update(
'<div class="text-content">asdfasdfasdfasdfsdf<br>adfasdfssdfsdfds<br>adasdfdfs</div>'
);

var panel7 = acc.add(new Ext.ux.InfoPanel('panel-7', {
title: 'Panel 7',
showPin: 'true',
collapseOnUnpin: false
}));
}
}
}();
Ext.onReady(test.init,test, true);
</script>
<title>test</title>
</head>
<body>
<div id="div-west">
<div id="acc-sports">
<div id="panel-7">
<div>7. Theme selector</div>
<div>
<div class="text-content">Select the theme you like:
<select id="theme-combo" name="theme-combo">
<option value="xtheme-default.css" selected="selected">Ext Blue</option>
<option value="xtheme-gray.css">Gray Theme</option>
<option value="xtheme-aero.css">Aero Glass Theme</option>
<option value="xtheme-vista.css">Vista Dark Theme</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Then I pin the third infopanel. The problem is, when I expand first / second infopanel, content of the third infopanel do not pushed down. As the result content of 3rd panel is overlap over content of 1st/2nd panel. Only happens with IE 6/7.
This condition also true when I pin 2nd panel, and I expand 1st panel, content of 2nd panel is overlap over content of 1st panel.

Currently I use accordion v.1.0.1. Ext 1.1 RC1.
Anyone can point me, what do I miss here?

Thanks,
JOhan

jsakalos
22 Jul 2007, 3:52 PM
I guess I've read this post somewhere else too...

Can you change doc type to html 4.01 transitional to see if it helps? I'm not sure how IE handles xhtml.

jexxi
22 Jul 2007, 9:51 PM
I've change it to doc type 4.01 transitional, but no luck :(.
I'm sure that I do miss something but don't know what it is.
And it also wonders me that when I access your sample page http://aariadne.com/accordion/accordion.html?showGrid=true, the pin works just fine.
So could you please check on my source code I posted earlier?

Thanks,
Johan

jsakalos
23 Jul 2007, 12:40 AM
Give you "acc-sports" css "zoom:1" and it will work. For further reading see To help with IE rendering issues. (http://extjs.com/forum/showthread.php?t=7038&highlight=rendering+issues)

jexxi
23 Jul 2007, 12:54 AM
Yes, it works accordingly.
I'll keep it in mind if things like that happens.

Thanks a lot,
Johan