2012-05-02 1 views
1

J'ai eu du mal à comprendre la nouvelle version de la toolkit dojo version 1.7.1 et je suis revenue à la version 1.5. J'essaye d'inclure le bordercontainer pour mettre en page mes commandes pour qu'elles correspondent à l'une des démos, mais le bordercontainer continue à tout chambouler.dijit.layout.bordercontainer cache tous les contenus internes

http://download.dojotoolkit.org/release-1.6.1/dojo-release-1.6.1/dijit/themes/themeTester.html

Je suis en train de recréer ce qui suit et je suis la partie du menu créé et faire le accordianContainer mais si j'inclus le BorderContainer alors tout ce qui apparaît est une ligne qui ressemble le conteneur consommation everthing et je pas voir les composants internes, y compris le menu. Toutes les idées ont été appréciées.

<body class="claro"> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ToolkitScriptManager1" runat="server"> 
    </asp:ScriptManager> 
      <div dojoType="dijit.Menu" id="submenu1" data-dojo-props='contextMenuForWindow:true, style:"display:none"' style="display: none;"> 
        <div dojoType="dijit.MenuItem">Enabled Item</div> 
        <div dojoType="dijit.MenuItem" data-dojo-props="disabled:true">Disabled Item</div> 
        <div dojoType="dijit.MenuSeparator"></div> 
        <div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconCut'">Cut</div> 
        <div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconCopy'">Copy</div> 
        <div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconPaste'">Paste</div> 
        <div dojoType="dijit.MenuSeparator"></div> 
        <div dojoType="dijit.PopupMenuItem"> 
           <span>Enabled Submenu</span> 
        <div dojoType="dijit.Menu" id="submenu2"> 
        <div dojoType="dijit.MenuItem">Submenu Item One</div> 
        <div dojoType="dijit.MenuItem">Submenu Item Two</div> 
        <div dojoType="dijit.PopupMenuItem"> 
           <span>Deeper Submenu</span> 
        <div dojoType="dijit.Menu" id="submenu4"> 
        <div dojoType="dijit.MenuItem">Sub-sub-menu Item One</div> 
        <div dojoType="dijit.MenuItem">Sub-sub-menu Item Two</div> 
        </div> 
       </div> 
       </div> 
       </div> 
       <div dojoType="dijit.PopupMenuItem" data-dojo-props="disabled:true"> 
         <span>Disabled Submenu</span> 
       <div dojoType="dijit.Menu" id="submenu3" style="display: none;"> 
       <div dojoType="dijit.MenuItem">Submenu Item One</div> 
       <div dojoType="dijit.MenuItem">Submenu Item Two</div> 
       </div> 
       </div> 
       <div dojoType="dijit.PopupMenuItem"> 
         <span>Different popup</span> 
       <div dojoType="dijit.ColorPalette"></div> 
       </div> 
       <div dojoType="dijit.PopupMenuItem"> 
         <span>Different popup</span> 
       <div dojoType="dijit.Calendar"></div> 
       </div> 
       </div> 



     <div id="main" dojoType="dijit.layout.BorderContainer" design="sidebar"> 
      <div id="header" dojoType="dijit.MenuBar" region="top"> 
             <div dojoType="dijit.PopupMenuBarItem" id="edit"> 
                 <span>Edit</span> 
              <div dojoType="dijit.Menu" id="editMenu"> 
               <div dojoType="dijit.Menu" id="Div1"> 
                 <div dojoType="dijit.MenuItem" id="cut" iconClass="dijitIconCut" 
                    onClick="console.log('not actually cutting anything, just a test!')">Cut</div> 
                 <div dojoType="dijit.MenuItem" id="copy" iconClass="dijitIconCopy" 
                    onClick="console.log('not actually copying anything, just a test!')">Copy</div> 
                 <div dojoType="dijit.MenuItem" id="paste" iconClass="dijitIconPaste" 
                    onClick="console.log('not actually pasting anything, just a test!')">Paste</div> 
                 <div dojoType="dijit.MenuSeparator" id="separator"></div> 
                 <div dojoType="dijit.MenuItem" id="undo" iconClass="dijitIconUndo">Undo</div> 
               </div> 
              </div> 
             </div> 
             <div dojoType="dijit.PopupMenuBarItem" id="view"> 
               <span>View</span> 
              <div dojoType="dijit.Menu" id="viewMenu"> 
              <div dojoType="dijit.MenuItem">Normal</div> 
              <div dojoType="dijit.MenuItem">Outline</div> 
              </div> 
              <div dojoType="dijit.PopupMenuItem"> 
               <span>Zoom</span> 
              <div dojoType="dijit.Menu" id="zoomMenu"> 
              <div dojoType="dijit.MenuItem">50%</div> 
              <div dojoType="dijit.MenuItem">75%</div> 
              <div dojoType="dijit.MenuItem">100%</div> 
              <div dojoType="dijit.MenuItem">150%</div> 
              <div dojoType="dijit.MenuItem">200%</div> 
              </div> 
              </div> 
             </div> 
             <div dojoType="dijit.PopupMenuBarItem" id="themes"> 
               <span>Themes</span> 
              <div dojoType="dijit.Menu" id="themeMenu"></div> 
             </div> 
             <div dojoType="dijit.PopupMenuBarItem" id="dialogs"> 
               <span>Dialogs</span> 
              <div dojoType="dijit.Menu" id="dialogMenu"> 
              <div dojoType="dijit.MenuItem" data-dojo-props="onClick: showDialog">slow loading</div> 
              <div dojoType="dijit.MenuItem" data-dojo-props="onClick: showDialogAb">action bar</div> 
              </div> 
             </div> 
             <div dojoType="dijit.PopupMenuBarItem" id="inputPadding"> 
               <span>TextBox Padding</span> 
              <div dojoType="dijit.Menu" id="inputPaddingMenu"> 
              <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding, checked:true">theme default</div> 
              <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">0px</div> 
              <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">1px</div> 
              <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">2px</div> 
              <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">3px</div> 
              <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">4px</div> 
              <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">5px</div> 
              </div> 
             </div> 
             <div dojoType="dijit.PopupMenuBarItem" id="help"> 
               <span>Help</span> 
              <div dojoType="dijit.Menu" id="helpMenu"> 
              <div dojoType="dijit.MenuItem">Help Topics</div> 
              <div dojoType="dijit.MenuItem">About Dijit</div> 
              </div> 
             </div> 
             <div dojoType="dijit.PopupMenuBarItem" data-dojo-props="disabled:true"> 
               <span>Disabled</span> 
              <div dojoType="dijit.Menu"> 
              <div dojoType="dijit.MenuItem">You should not see this</div> 
              </div> 
             </div> 
       </div> 
       <div dojoType="dijit.layout.AccordionContainer"minSize="20" style="width: 300px;" id="leftAccordion" region="left" splitter="true"> 

         <div dojoType="dijit.layout.ContentPane" title="Popups and Alerts"><div style="padding:8px"> 
         </div> 
       </div><!-- end AccordionContainer -->           
      </div> 
     </div> 
    </form> 

Répondre

3

Il peut être difficile d'obtenir BorderContainer à rendre. Habituellement, je trouve que c'est un problème de taille, et que c'est complètement la mauvaise taille.

J'essaie habituellement:

  1. Utilisez vos outils de développement du navigateur pour inspecter le correspondant au BorderContainer, et découvrir ce que sa taille réelle est. Ce sera généralement quelque chose comme un onglet appelé «métriques» qui indique la position exacte et la taille de votre conteneur, et ce qui se passe avec son remplissage et sa marge. Il y a une chance que ce soit 0px.
  2. Dans votre code HTML, définissez explicitement la largeur et la hauteur de votre div BorderContainer sur quelque chose de statique et codé en dur (par exemple style = "width: 300px; height: 300px") et voyez ce qui se passe.
+0

Merci pour votre aide. Travaillez-vous beaucoup sur des dojo/une partie de l'équipe de production? Existe-t-il une autre source d'informations pouvant vous aider à poser des questions sur le dojo? tu ne veux pas continuer à te harceler? – vbNewbie

+0

Je viens de jouer avec Dojo au cours des derniers mois. La documentation officielle (trois ensembles: tutoriels, guides de référence, et documents d'API [par ordre décroissant d'utilité!]) Et la source sont vraiment la plus grande source d'information. –

0

Je suppose, en plus de solution Royston, ce qui a fonctionné pour moi est en train de faire ceci:
dijit.byId ("principal") redimensionne();.
(où "principal" est l'ID du BorderContainer).

Questions connexes