I tried using "dojo/domReady!" before creating new widgets dynamically.
dojo automatically creates views with iconcontainers
-
03-06-2022 - |
문제
I have a problem with Dojo. When Dojo initializes, Dojo automatically creates 2 mobileViews with mobile iconContainers in them. He creates them next to my page. Because of this, it blocks my views I wrote. I can't click on buttons on my view.
The strange thing about this, is that it only happens sometimes! when I refresh 4-5 times, it all goes well. But when I refresh again then sometimes is happens again.
I don't know why Dojo creates them.
In my js code I make a accordion container with the command
var accordion = new Accordion({iconBase: "images/Plus.png"}, "schoolContainer");
This makes a accordion container in this div
<div id="schoolContainer"></div>
In this container I add a iconMenu with the next commands
accordion.addChild(pane);
and iconContainer.placeAt(pane.containerNode); iconContainer.startup();
and accordion.addChild(pane);
I don't get why Dojo creates new views with iconContainers next to my main page.
These are the view that are created
<div class="mblView" id="dojox_mobile_IconContainer_0_mblApplView" widgetid="dojox_mobile_IconContainer_0_mblApplView" style="visibility: visible;"><h1 class="mblHeading mblHeadingCenterTitle" id="dojox_mobile_Heading_0" widgetid="dojox_mobile_Heading_0" style="-webkit-user-select: none;"><span role="button" class="mblToolBarButton mblToolBarButtonHasLeftArrow" tabindex="0" id="dojox_mobile_ToolBarButton_0" dir="ltr" widgetid="dojox_mobile_ToolBarButton_0"><span class="mblToolBarButtonArrow mblToolBarButtonLeftArrow mblColorDefault mblColorDefault45"></span><span class="mblToolBarButtonBody mblColorDefault"><table cellpadding="0" cellspacing="0" border="0" class="mblToolBarButtonText"><tbody><tr><td class="mblToolBarButtonIcon"></td><td class="mblToolBarButtonLabel">Home</td></tr></tbody></table></span></span><span class="mblHeadingSpanTitle" style="">My Application</span><div class="mblHeadingDivTitle" role="heading" aria-level="1">My Application</div></h1><div class="mblContainer" id="dojox_mobile_Container_0" widgetid="dojox_mobile_Container_0"><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_0" widgetid="dojox_mobile__IconItemPane_0" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1A</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_1" widgetid="dojox_mobile__IconItemPane_1" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1B</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_2" widgetid="dojox_mobile__IconItemPane_2" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 1C</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_3" widgetid="dojox_mobile__IconItemPane_3" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle"></span></h2><div class="mblContent"></div></div></div></div>
<div class="mblView" id="dojox_mobile_IconContainer_1_mblApplView" widgetid="dojox_mobile_IconContainer_1_mblApplView" style="visibility: visible; display: none;"><h1 class="mblHeading" id="dojox_mobile_Heading_1" widgetid="dojox_mobile_Heading_1" style="-webkit-user-select: none;"><span role="button" class="mblToolBarButton mblToolBarButtonHasLeftArrow" tabindex="0" id="dojox_mobile_ToolBarButton_1" dir="ltr" widgetid="dojox_mobile_ToolBarButton_1"><span class="mblToolBarButtonArrow mblToolBarButtonLeftArrow mblColorDefault mblColorDefault45"></span><span class="mblToolBarButtonBody mblColorDefault"><table cellpadding="0" cellspacing="0" border="0" class="mblToolBarButtonText"><tbody><tr><td class="mblToolBarButtonIcon"></td><td class="mblToolBarButtonLabel">Home</td></tr></tbody></table></span></span><span class="mblHeadingSpanTitle" style="">My Application</span><div class="mblHeadingDivTitle" role="heading" aria-level="1">My Application</div></h1><div class="mblContainer" id="dojox_mobile_Container_1" widgetid="dojox_mobile_Container_1"><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_4" widgetid="dojox_mobile__IconItemPane_4" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2A</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_5" widgetid="dojox_mobile__IconItemPane_5" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2b</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_6" widgetid="dojox_mobile__IconItemPane_6" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle">Klas 2c</span></h2><div class="mblContent"></div></div><div class="mblIconItemPane" id="dojox_mobile__IconItemPane_7" widgetid="dojox_mobile__IconItemPane_7" style="display: none;"><h2 class="mblIconItemPaneHeading"><div class="mblIconItemPaneIcon" role="" title="" tabindex="0"><div title="" class="mblDomButtonBlueMinus mblDomButton"><div><div></div></div></div></div><span class="mblIconItemPaneTitle"></span></h2><div class="mblContent"></div></div></div></div>
I found out that the problem is made by the next code, but I don't know why.
/*KLASSENOVERZICHT FUNCTIONALITY START*/
function toonScholen(items){
WL.Logger.debug("Stap 6: toonScholen START");
//alert("Via adapter: "+JSON.stringify(items));
var json = getScholen();
for (var i = 0; i < json.length; i++) {
//alert(json[i].naam);
}
require([
"dojox/mobile/Accordion",
"dojox/mobile/ContentPane",
"dojox/mobile/RoundRectList",
"dojox/mobile/ListItem",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/IconContainer"
], function(Accordion, ContentPane, RoundRectList, ListItem){
var accordion = new Accordion({iconBase: "images/Plus.png"}, "schoolContainer");
accordion.startup();
var pane;
var scholen = json.scholen;
for (var i = 0; i < scholen.length; i++) {
// ContentPane : Scholen
pane = new ContentPane({
class: "schoolContainer",
label: scholen[i].naam,
icon1:"images/ArrowDown.png",
icon2:"images/ArrowUp.png" ,
iconPos1:"0,0,42,42",
iconPos2:"0,0,42,42"
});
accordion.addChild(pane);
var iconContainer = new dojox.mobile.IconContainer({transition:'scaleIn', iconBase:'images/Tile_Blue.png'});
iconContainer.placeAt(pane.containerNode);
iconContainer.startup();
//IconMenu : Klassen
var klassen = scholen[i].klassen;
for (var j = 0; j < klassen.length; j++) {
var iconUrl;
if (j%3 == 1){
iconUrl= "images/Tile_Blue.png";
}
else if(j%3 == 2){
iconUrl= "images/Tile_Green.png";
}
else if(j%3 == 0){
iconUrl= "images/Tile_Red.png";
}
iconJs =new dojox.mobile.IconItem({label:klassen[j].naam, icon:iconUrl ,moveTo:'klasView', transition:'scaleIn', class:'klasIcon'});
iconContainer.addChild(iconJs);
}
//IconMenu : Klas toevoegen
iconJs =new dojox.mobile.IconItem({label:'', deletable: false, icon:'images/Tile_Toevoegen.png',moveTo:'klasToevoegenView?schoolId='+scholen[i].id,transition:'slide', class:'klasIcon'});
iconContainer.addChild(iconJs);
}
// ContentPane : School toevoegen
pane = new ContentPane({
class: "schoolContainer",
label:"School toevoegen",
icon1:"images/Plus.png",
icon2:"images/Plus.png",
iconPos1:"0,0,42,42",
iconPos2:"0,0,42,42"
});
accordion.addChild(pane);
});
WL.Logger.debug("Stap 6: toonScholen END");
}
/*KLASSENOVERZICHT FUNCTIONALITY END*/
해결책