I'm sorry for that code. I just point out the problem. it doesn't work .
Here is complete example , i tested in firefox2.0.0.5 And IE7 (windows server2003 sp2)
Code:
######Example Diredtory Structure#########
(BaseDirectory)
----yui-utilities.js
----ext-yui-adapter.js
----ext-all.js
----Ext.ux.InfoPanel.js
----Ext.ux.Accordion.js
----accordion.css
----resources (ext resources directory)
+---css
+---xtheme-default.css
+---ext-all.css
----icons (icons directory)
----Accordion.htm
----AjaxAccordion.htm ( load by Accordion.htm)
it has 2 htm pages.
Accordion.htm
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accordion Example</title>
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./accordion.css" />
<link rel=stylesheet type=text/css id=theme href="./resources/css/xtheme-default.css" >
<script language="javascript" src="./yui-utilities.js"></script>
<script language="javascript" src="./ext-yui-adapter.js"></script>
<script language="javascript" src="./ext-all.js"></script>
<script language="javascript" src="./Ext.ux.InfoPanel.js"></script>
<script language="javascript" src="./Ext.ux.Accordion.js"></script>
<script language="javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';
var iconPath='icons/';
// create fitHeight accordion
var acc2 = new Ext.ux.Accordion('acc2-ct', {
body: 'acc2-body'
, boxWrap: true
, wrapEl: 'acc2-wrap'
, fitContainer: true
, fitToFrame: true
, fitHeight: true
, initialHeight: 240
// , animate: false
});
// add panels to fitHeight accordion
acc2.add(new Ext.ux.InfoPanel('panel2-1', {
icon: iconPath + 'calendar_view_month.png'
// , autoScroll: true
}));
acc2.add(new Ext.ux.InfoPanel('panel2-2', {
icon: iconPath + 'database_table.png'
}));
acc2.add(new Ext.ux.InfoPanel('panel2-3', {
icon: iconPath + 'cart.png'
}));
acc2.add(new Ext.ux.InfoPanel('panel2-4', {
icon: iconPath + 'email.png'
}));
acc2.add(new Ext.ux.InfoPanel('panel2-5', {
icon: iconPath + 'feed.png'
}));
});
function callAjax(){
Ext.get("AccordionContainer").load({
url: "./AjaxAccordion.htm",
scripts:true,
text: "Loading..."
});
}
</script>
</head>
<body>
<div>
<button id="load" onclick="callAjax()">Show Me</button>
</div>
<div id="AccordionContainer">
<DIV id=acc2-ct>
<DIV id=acc2-wrap>
<DIV id=acc2-body>
<div id=panel2-1>
<div>panel 2-1</div>
<div>
<div class=text-content>
morbi eros nunc, adipiscing vitae, adipiscing quis,
feugiat ac, erat. pellentesque auctor, ligula quis commodo egestas, urna risus
luctus ante, nec rutrum tortor ante eget erat. donec venenatis elit sed justo.
</div>
</div>
</div>
<div id=panel2-2>
<div>panel 2-2</div>
<div>
<div class=text-content>
lorem ipsum dolor sit amet, consectetuer adipiscing
elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti.
vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue.
</div>
</div>
</div>
<div id=panel2-3>
<div>panel 2-3</div>
<div>
<div class=text-content>
lorem ipsum dolor sit amet, consectetuer adipiscing
elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti.
vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue.
</div>
</div>
</div>
</div>
<div id=panel2-4>
<div>panel 2-4</div>
<div>
<div class=text-content>
lorem ipsum dolor sit amet, consectetuer adipiscing
elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti.
vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue.
</div>
</div>
</div>
</div>
<div id=panel2-5>
<div>panel 2-5</div>
<div>
<div class=text-content>
lorem ipsum dolor sit amet, consectetuer adipiscing
elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti.
vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
AjaxAccordion.htm
Code:
<script language="javascirpt">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';
var iconPath='icons/';
// create fitHeight accordion
var acc2 = new Ext.ux.Accordion('acc2-ct', {
body: 'acc2-body'
, boxWrap: true
, wrapEl: 'acc2-wrap'
, fitContainer: true
, fitToFrame: true
, fitHeight: true
, initialHeight: 240
// , animate: false
});
// add panels to fitHeight accordion
acc2.add(new Ext.ux.InfoPanel('panel2-1', {
icon: iconPath + 'calendar_view_month.png'
// , autoScroll: true
}));
acc2.add(new Ext.ux.InfoPanel('panel2-2', {
icon: iconPath + 'database_table.png'
}));
acc2.add(new Ext.ux.InfoPanel('panel2-3', {
icon: iconPath + 'cart.png'
}));
acc2.add(new Ext.ux.InfoPanel('panel2-4', {
icon: iconPath + 'email.png'
}));
acc2.add(new Ext.ux.InfoPanel('panel2-5', {
icon: iconPath + 'feed.png'
}));
});
</script>
<DIV id=acc2-ct>
<DIV id=acc2-wrap>
<DIV id=acc2-body>
<div id=panel2-1>
<div>panel 2-1</div>
<div>
<div class=text-content>
morbi eros nunc, adipiscing vitae, adipiscing quis,
feugiat ac, erat. pellentesque auctor, ligula quis commodo egestas, urna risus
luctus ante, nec rutrum tortor ante eget erat. donec venenatis elit sed justo.
</div>
</div>
</div>
<div id=panel2-2>
<div>panel 2-2</div>
<div>
<div class=text-content>
lorem ipsum dolor sit amet, consectetuer adipiscing
elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti.
vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue.
</div>
</div>
</div>
<div id=panel2-3>
<div>panel 2-3</div>
<div>
<div class=text-content>
lorem ipsum dolor sit amet, consectetuer adipiscing
elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti.
vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue.
</div>
</div>
</div>
</div>
<div id=panel2-4>
<div>panel 2-4</div>
<div>
<div class=text-content>
lorem ipsum dolor sit amet, consectetuer adipiscing
elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti.
vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue.
</div>
</div>
</div>
</div>
<div id=panel2-5>
<div>panel 2-5</div>
<div>
<div class=text-content>
lorem ipsum dolor sit amet, consectetuer adipiscing
elit. fusce pellentesque. duis fermentum metus nec nisl. suspendisse potenti.
vivamus id nibh ut neque sollicitudin ullamcorper. vivamus quis augue.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
