PDA

View Full Version : Accordion/InfoPanel error when loaded twice



zaratine
23 Jul 2007, 11:03 AM
hello everybody

I'm loving Ext but I'm having some problems :(




This js is fired when the menu is loaded

var result = Ajax.responseText; // JSP code that contains the DIV's
menuDiv.innerHTML = result;
LazyLoad.loadOnce([js]);



if I execute this code twice the menu get bugged like this.

http://img68.imageshack.us/img68/893/errorfv7.jpg (http://imageshack.us)

Each menu have a .JSP and a .JS file. How you can see, the HTML at the menu div is erased every time the menu is opened.
Seems that the js is messing the objs or something like that.

any idea?

thanks in advance!

jsakalos
23 Jul 2007, 2:19 PM
One Accordion must be created only only on one page. The content of panels can be changed, loaded from server, etc., but if you create same object twice you get into troubles.

zaratine
24 Jul 2007, 3:10 AM
I thought I will need some king of singleton for my js, but u make me see the problem from another perspective...maybe if a use .destroy() and create the menus dynamic I'll have a solution..

thanks!

I'll post my code here ASAP!

vflying
24 Jul 2007, 9:22 PM
[QUOTE=zaratine;48604]hello everybody

I'm loving Ext but I'm having some problems :(




This js is fired when the menu is loaded

var result = Ajax.responseText; // JSP code that contains the DIV's
menuDiv.innerHTML = result;
LazyLoad.loadOnce([js]);



if I execute this code twice the menu get bugged like this.

http://img68.imageshack.us/img68/893/errorfv7.jpg (http://imageshack.us)

Each menu have a .JSP and a .JS file. How you can see, the HTML at the menu div is erased every time the menu is opened.
Seems that the js is messing the objs or something like that.


I have the same problem.but in ie is OK,in firefox 2.0 has this problem.
use this code:
Ext.onReady(
function()
);

jsakalos
25 Jul 2007, 12:55 AM
Do you have a link where I could see this problem in action?

vflying
26 Jul 2007, 6:29 AM
Do you have a link where I could see this problem in action?
I do not have a link ,but i can give you some code like this:


<html>
<head>
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./accordion.css" />
<LINK id=theme href="./resources/css/xtheme-default.css" type=text/css rel=stylesheet>
<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>

function init(){
Ext.get('acc2-ct').innerHTML='';
Ext.BLANK_IMAGE_URL = './resources/images/default/s.gif';
var iconPath='icons/';
// create fitHeight accordion
var acc2 = new Ext.ux.Accordion('acc2-body', {
body: 'acc2-body'
//, boxWrap: true
//, wrapEl: 'acc2-wrap'
, fitContainer: true
, fitToFrame: true
, fitHeight: true
, initialHeight: 240
, desktop: 'center-accordions'
// , 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'
}));
// }}}
// {{{
}
Ext.onReady(init);
</script>
</head>
<body>
<div style="float:right;width:100px;">
<INPUT TYPE="button" id="button" VALUE="Load twice" onclick="init();">
<INPUT TYPE="button" id="Ajax" value="Load Ajax"
onclick="function (){
Ext.get('acc2-ct').load({
url:'Accordion.htm',
scripts:true,
text:'loading...'
});
}" >
</div>
<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>
</body>
</html>

jsakalos
26 Jul 2007, 7:30 AM
I quite cannot get what is this.



There is no doctype; browser probably goes to quirks mode
Script tags do not have type attribute; language attribute is almost always ignored by non IE browsers.
Attributes of majority of tags are not quoted
You include adapters from some non-standard directory; are they included at all?
You have quite complex html markup in acc2-ct but in the first statement of the init() you are trying to clear it all. You don't clear it in fact as Ext.get returns Ext.Element and setting Ext.Element's property innerHTML to '' has no effect.

Result is that you create new Accrodions in the same container over and over. Even if you'd correctly set acc2-ct content to '' this is not going to work. Accordion is complex structure with a lot of event handlers, references, etc. and setting it's container's innerHTML to '' would lead at least to memory leaks.

I'd advice to learn more about html an Ext and then to choose much simpler task, e.g. How to integrate... part of Howto on the Accordion demo page.

That what you posted is never going to work.

vflying
27 Jul 2007, 7:04 PM
:">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)




######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


<!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


<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>

http://www.blog.sh/0/2007-7/281412794469.jpg
http://www.blog.sh/0/2007-7/281412629730.jpg

jsakalos
28 Jul 2007, 1:33 AM
Read this: How to get reply to your question quickly? (http://extjs.com/forum/showthread.php?t=6272) and then tell me what do you want me to do?

vflying
29 Jul 2007, 1:31 AM
I refresh the content of the container and then create a new Accrodion on the same container.
May be I'll change my code , only refresh the content of container ,don't recreate
Accordion Object. I will try again. :)