Results 1 to 3 of 3

Thread: Visual artifacts after I remove/hide buttons with animations

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    8

    Default Visual artifacts after I remove/hide buttons with animations

    Here's what I think is happening. I have a list of buttons that either appear or disappear depending on my app's settings. Everything is fine at first, but after I do a few show / hide / remove actions, the buttons still take up space even though they're hidden (which totally sucks when you're trying to center everything all nicely).

    I call doLayout() every time I show/hide/remove/add components to the panel, but it doesn't seem to do anything. The old buttons still take up space.

    Is there any way to completely remove a panel / object from the DOM and start totally fresh? I tried destroying the "tainted" panel, but that didn't work either. I just get a bunch of other errors.

    Here's some code from the app.

    Function that gets called when you change the number of dice displayed on the screen:
    Code:
    function changeDiceGraphics(numJumps,switchButtons,spinButtons,corkButtons,rotationButtons,grabButtons,jumpPanels){
    					
    	if(numJumps == 1){
    		
    		if(jumpPanels[1].isHidden() == true){
    			jumpPanels[1].show();
    		}
    		
    		//Show the next row
    		if(jumpPanels[2].isHidden() == true){
    			jumpPanels[2].show();
    		}
    					
    		if(jumpPanels[3].isHidden() == false){
    			jumpPanels[3].hide();	
    		}
    					
    		//Hide the buttons we aren't using from rows 1 and 2
    		if(rotationButtons[1].isHidden() == false){
    			rotationButtons[1].hide();
    		}
    		
    		rotationButtons[1].doComponentLayout();
    		jumpPanels[1].doLayout();
    		
    		if(grabButtons[1].isHidden() == false){
    			grabButtons[1].hide();
    		}
    		
    		grabButtons[1].doComponentLayout();
    		jumpPanels[1].doLayout();
    		
    		if(switchButtons[2].isHidden() == false){
    			switchButtons[2].hide();
    		}
    		
    		switchButtons[2].doComponentLayout();
    		jumpPanels[2].doLayout();
    		
    		if(spinButtons[2].isHidden() == false){
    			spinButtons[2].hide();
    		}
    		
    		spinButtons[2].doComponentLayout();
    		jumpPanels[2].doLayout();
    					
    		//Resize items in the first row
    		spinButtons[1].setSize(120,120);
    		switchButtons[1].setSize(120,120);
    		corkButtons[1].setSize(120,120);
    					
    		jumpPanels[1].doLayout();
    					
    		//Resize items in the second row
    		rotationButtons[2].setSize(120,120);
    		grabButtons[2].setSize(120,120);
    		
    		//jumpPanels[2].doLayout();
    		
    		jumpPanels[1].setPosition(0,220);
    		jumpPanels[2].setPosition(0,360);
    
    		jumpPanels[1].setWidth(320);
    		jumpPanels[2].setWidth(320);
    
    		jumpPanels[1].setHeight(130);
    		jumpPanels[2].setHeight(130);
    		jumpPanels[3].setHeight(130);
    			
    	}
    	
    	if(numJumps == 2){
    	
    		for(i = 1; i <= 2; i++){
    		
    			if(jumpPanels[i].isHidden() == true){
    				jumpPanels[i].show();
    			}
    			//Set size on all buttons
    			rotationButtons[i].setSize(80,80);
    			grabButtons[i].setSize(80,80);
    			switchButtons[i].setSize(80,80);
    			corkButtons[i].setSize(80,80);
    			spinButtons[i].setSize(80,80);
    				
    		}
    		
    		jumpPanels[1].setPosition(0,220);
    		jumpPanels[2].setPosition(0,360);
    
    		jumpPanels[1].setWidth(320);
    		jumpPanels[2].setWidth(320);
    
    		jumpPanels[1].setHeight(80);
    		jumpPanels[2].setHeight(80);
    			
    	}
    	
    	if(numJumps == 3){
    	
    		for(i = 1; i <= 3; i++){
    		
    			if(jumpPanels[i].isHidden() == true){
    				jumpPanels[i].show();
    			}
    			//Set size on all buttons
    			rotationButtons[i].setSize(80,80);
    			grabButtons[i].setSize(80,80);
    			switchButtons[i].setSize(80,80);
    			corkButtons[i].setSize(80,80);
    			spinButtons[i].setSize(80,80);
    				
    					
    		}
    	
    		jumpPanels[1].setPosition(0,220);
    		jumpPanels[2].setPosition(0,320);
    		jumpPanels[3].setPosition(0,420);
    					
    		jumpPanels[1].setWidth(320);
    		jumpPanels[2].setWidth(320);
    		jumpPanels[3].setWidth(320);
    					
    		jumpPanels[1].setHeight(80);
    		jumpPanels[2].setHeight(80);
    		jumpPanels[3].setHeight(80);
    				
    	}
    	
    };
    Function that runs when you hide the dice and roll:
    Code:
    window.hideDice = function(){
    			
    			if(numJumps == 1){
    			
    				if(switchButtons[1].isHidden() == false){
    					
    					switchButtons[1].hide();
    					
    				}
    				
    				jumpPanels[1].doLayout();
    				
    				if(spinButtons[1].isHidden() == false){
    				
    					spinButtons[1].hide();
    				
    				}
    				
    				jumpPanels[1].doLayout();
    				
    				if(corkButtons[1].isHidden() == false){
    				
    				corkButtons[1].hide();
    				
    				}
    				
    				jumpPanels[1].doLayout();
    				
    				if(rotationButtons[2].isHidden() == false){
    				
    					rotationButtons[2].hide();
    					
    				}
    				
    				jumpPanels[2].doLayout();
    				
    				if(grabButtons[2].isHidden() == false){
    					
    					grabButtons[2].hide();
    					
    				}
    				
    				jumpPanels[2].doLayout();
    				
    				window.setTimeout('window.showJumpDice()',2000);
    			
    			}
    			
    			if(numJumps == 2){
    			
    				for(i = 1; i <= 2; i++){
    				
    					if(switchButtons[i].isHidden() == false){
    						switchButtons[i].hide();
    					}
    					
    					if(spinButtons[i].isHidden() == false){
    						spinButtons[i].hide();
    					}
    					
    					if(corkButtons[i].isHidden() == false){
    						corkButtons[i].hide();
    					}
    					
    					if(rotationButtons[i].isHidden() == false){
    						rotationButtons[i].hide();
    					}
    					
    					if(grabButtons[i].isHidden() == false){
    						grabButtons[i].hide();
    					}
    					
    					jumpPanels[i].doComponentLayout();
    				}	
    				
    				window.setTimeout('window.showJumpDice()',2000);
    			}
    			
    			if(numJumps == 3){
    			
    				for(i = 1; i <= 3; i++){
    				
    					if(switchButtons[i].isHidden() == false){
    						switchButtons[i].hide();
    					}
    					
    					if(spinButtons[i].isHidden() == false){
    						spinButtons[i].hide();
    					}
    					
    					if(corkButtons[i].isHidden() == false){
    						corkButtons[i].hide();
    					}
    					
    					if(rotationButtons[i].isHidden() == false){
    						rotationButtons[i].hide();
    					}
    					
    					if(grabButtons[i].isHidden() == false){
    						grabButtons[i].hide();
    					}
    					
    					jumpPanels[i].doComponentLayout();
    				}	
    				
    				window.setTimeout('window.showJumpDice()',2000);
    			}
    			
    			window.setTimeout('window.roll()',1000);
    			
    		}
    Function that runs when you show the dice:
    Code:
    window.showJumpDice = function(){
    
    			
    			if(numJumps == 1){
    			
    				if(trickArray[1].isSwitch == false){
    					
    					if(jumpPanels[1].getComponent(0).getText() == "Switch"){
    					
    						jumpPanels[1].remove(jumpPanels[1].getComponent(0));
    						
    						switchButtons[1].doComponentLayout();
    						jumpPanels[1].doLayout();	
    						
    					}
    				}
    					
    				if(trickArray[1].isSwitch == true){
    						
    					if(switchButtons[1].isHidden() == true){
    						switchButtons[1].show();
    					}
    					
    					switchButtons[1].doComponentLayout();
    					jumpPanels[1].doLayout();
    						
    				}
    				
    				if(trickArray[1].cork != "null"){
    				
    					if(corkButtons[1].isHidden() == true){
    						corkButtons[1].show();	
    					}
    					
    					corkButtons[1].doComponentLayout();
    					jumpPanels[1].doLayout();
    				}
    				
    				if(spinButtons[1].isHidden() == true){
    					spinButtons[1].show();
    				}
    				
    				spinButtons[1].doComponentLayout();
    				jumpPanels[1].doLayout();
    				
    				if(rotationButtons[2].isHidden() == true){
    					rotationButtons[2].show();
    				}
    				
    				rotationButtons[2].doComponentLayout();
    				jumpPanels[2].doLayout();
    				
    				if(grabButtons[2].isHidden() == true){
    					grabButtons[2].show();
    				}
    				
    				grabButtons[2].doComponentLayout();
    				jumpPanels[2].doLayout();
    				
    				jumpPanels[1].setPosition(0,220);
    				jumpPanels[2].setPosition(0,360);
    
    				
    				jumpPanels[1].setWidth(320);
    				jumpPanels[1].setHeight(130);
    				jumpPanels[2].setWidth(320);
    				jumpPanels[2].setHeight(130);
    				
    				spinButtons[1].setSize(120,120);
    				grabButtons[2].setSize(120,120);
    				
    				jumpPanels[1].setPosition(0,220);
    				jumpPanels[2].setPosition(0,360);
    				
    				for(i = 0; i <= 2; i++){
    				
    					alert(jumpPanels[1].getComponent(i).getText());	
    					
    				}
    
    			}
    			else{
    			
    				for(i = 1; i <= numJumps; i++){
    				
    					if(trickArray[i].isSwitch == false){
    					
    						if(jumpPanels[i].getComponent(0).getText() == "Switch"){
    					
    							jumpPanels[i].remove(jumpPanels[i].getComponent(0));	
    						
    							jumpPanels[i].doLayout();
    							jumpPanels[i].doComponentLayout();
    						
    						}
    					}
    					
    					if(trickArray[i].isSwitch == true){
    						
    						if(switchButtons[i].isHidden() == true){
    							switchButtons[i].show();
    						}
    						
    						jumpPanels[i].doLayout();
    						jumpPanels[i].doComponentLayout();
    					}
    					
    					if(trickArray[i].cork != "null"){
    				
    						if(corkButtons[i].isHidden() == true){
    							corkButtons[i].show();
    						}
    						
    						jumpPanels[i].doLayout();
    						jumpPanels[i].doComponentLayout();
    					
    					}
    					
    					if(trickArray[i].cork == "null"){
    							
    						for(j = 0; j <= 2; j++){
    						
    													
    							if(jumpPanels[i].getComponent(j).getText() == "Cork"){
    					
    								jumpPanels[i].remove(jumpPanels[i].getComponent(j));	
    						
    								jumpPanels[i].doLayout();
    								jumpPanels[i].doComponentLayout();
    							}
    						}
    					}
    					
    					if(spinButtons[i].isHidden() == true){
    						spinButtons[i].show();
    					}
    					
    					jumpPanels[i].doComponentLayout();
    					jumpPanels[i].doLayout();
    					
    					if(rotationButtons[i].isHidden() == true){
    						rotationButtons[i].show();
    					}
    					
    					jumpPanels[i].doComponentLayout();
    					jumpPanels[i].doLayout();
    					
    					if(grabButtons[i].isHidden() == true){
    						grabButtons[i].show();
    					}
    					
    					jumpPanels[i].doComponentLayout();
    					jumpPanels[i].doLayout();
    									
    				}	
    				
    			}
    
    			//alert("after roll");			
    			for(i = 1; i <= numJumps; i++){
    			
    				jumpPanels[i].setWidth(320);
    				jumpPanels[i].setHeight(80);
    				
    				//jumpPanels[i].doComponentLayout();
    				//jumpPanels[i].doLayout();
    			}
    			
    		}
    I use show animations and hide animations when the dice appear and disappear. Could this be the cause of the problem?

    I honestly think this might be a bug in Sencha. I've tried removing the buttons from the panel containing them, but I still see the visual artifacts. I've even tested to see if the items are there, and even when they most certainly aren't there, the old items still take up space on the screen (even though they're "hidden").

    I can't seem to get the old items out of the panel for GOOD. That's the problem I'm having.

    Anybody else encounter this issue?

    Thanks,
    -Ted Bendixson

  2. #2

    Default

    I have the same problem. I have a button docked to my panel that handles list paging. When the user performed a search I hide the button. The button becomes invisible but still takes up space at the bottom of the panel. I've tried everything from doLayout to Ext.repaint.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    8

    Default Well that took a long time.

    Yeah. It's sort of funny. Ever since I got this bug, I decided to abandon Sencha completely in favor of native development tools. All in all, I've found it quite liberating and much easier to build iPhone applications this way.

    To be blunt, Sencha just doesn't have what I need to do really graphics intensive sort of stuff. The graphics are quite buggy actually. Plus, when it comes to animation, it's just weak sauce. It's got nothing on native.

    I honestly think you'll waste less time if you drop everything and just learn objective C. The documentation is much much better, and you won't be messing around with stupid errors you don't understand. Ever since abandoning Sencha, I was able to rebuild my app within a few days, and I've become more productive overall so far as iPhone app development is concerned.

    Seriously. This framework kinda blows.
    -Ted

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •