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