Hybrid View

  1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    3
    Vote Rating
    0
    zaratine is on a distinguished road

      0  

    Default Accordion/InfoPanel error when loaded twice

    Accordion/InfoPanel error when loaded twice


    hello everybody

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

    Code:
    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.



    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!

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    3
    Vote Rating
    0
    zaratine is on a distinguished road

      0  

    Default


    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!

  4. #4
    Ext User
    Join Date
    Apr 2007
    Posts
    6
    Vote Rating
    0
    vflying is on a distinguished road

      0  

    Default


    [QUOTE=zaratine;48604]hello everybody

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

    Code:
    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.



    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()
    );

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Do you have a link where I could see this problem in action?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Ext User
    Join Date
    Apr 2007
    Posts
    6
    Vote Rating
    0
    vflying is on a distinguished road

      0  

    Default Example

    Example


    Quote Originally Posted by jsakalos View Post
    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:
    Code:
    <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>

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Ext User
    Join Date
    Apr 2007
    Posts
    6
    Vote Rating
    0
    vflying is on a distinguished road

      0  

    Default I'm sorry for that code

    I'm sorry for that code


    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>

    Last edited by vflying; 27 Jul 2007 at 10:16 PM. Reason: Add pictures

Thread Participants: 2