dijit的问题：这些组件还越来越呈现

我使用Spring JS 2.3.0.RELEASE（使用道场1.6）：我想将小工具添加到我的网页，但它永远不会呈现dijit的问题：这些组件还越来越呈现

我使用的网页，通过瓷砖所以这里的布局模板shopper.jspx

<html xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:tiles="http://tiles.apache.org/tags-tiles" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:spring="http://www.springframework.org/tags"> 
<jsp:output doctype-root-element="HTML" doctype-system="about:legacy-compat" /> 
<jsp:directive.page contentType="text/html;charset=UTF-8" /> 
<jsp:directive.page pageEncoding="UTF-8" /> 
<jsp:output omit-xml-declaration="true" /> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
<link rel="stylesheet" type="text/css" href="/resources/dojo/resources/dojo.css"/> 
<link rel="stylesheet" type="text/css" href="/resources/dijit/themes/nihilo/nihilo.css" /> 
<link rel="stylesheet" type="text/css" href="/resources/css/screen.css" /> 
<c:url var="rootUrl" value="/resources/"/> 
<script type="text/javascript" djconfig="parseOnLoad: true" src="${rootUrl}dojo/dojo.js"><jsp:text></jsp:text> </script> 
<script type="text/javascript" src="${rootUrl}spring/Spring.js"> 
    <jsp:text></jsp:text> 
</script> 
<script type="text/javascript" src="${rootUrl}spring/Spring-Dojo.js"> 
    <jsp:text></jsp:text> 
</script> 
<script type="text/javascript"> 
    dojo.require("dojo.parser"); 
</script> 
<title>My Shopping</title> 
</head> 
<body class="nihilo"> 
    <tiles:insertAttribute name="header" /> 
    <tiles:insertAttribute name="submenu" /> 
    <tiles:insertAttribute name="body" /> 
    <tiles:insertAttribute name="footer" ignore="true" /> 
</body> 
</html>

，这里是它会覆盖身体属性

<?xml version="1.0" encoding="UTF-8" ?> 
<div id="page" class="roundedCorners" xmlns:spring="http://www.springframework.org/tags" xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:form="http://www.springframework.org/tags/form"> 
    <jsp:directive.page contentType="text/html;charset=UTF-8" /> 
    <jsp:output omit-xml-declaration="yes" /> 
    <c:url var="rootUrl" value="/resources/"/> 
    <script> 
     dojo.require("dijit.layout.BorderContainer"); 
     dojo.require("dijit.layout.TabContainer"); 
     dojo.require("dijit.layout.AccordionContainer"); 
     dojo.require("dijit.layout.ContentPane"); 
     dojo.addOnLoad(function() 
      { 
      // create a BorderContainer as the top widget in the hierarchy 
      var bc = new dijit.layout.BorderContainer({style: "height: 100%; width: 100%;"}); 

      // create a ContentPane as the left pane in the BorderContainer 
      var cp1 = new dijit.layout.ContentPane({ 
       region: "left", 
       style: "height: 100px", 
       content: "hello world" 
      }); 
      bc.addChild(cp1); 

      // create a TabContainer as the center pane in the BorderContainer, 
      // which itself contains two children 
      var tc = new dijit.layout.TabContainer({region: "center"}); 
      var tab1 = new dijit.layout.ContentPane({title: "tab 1"}), 
       tab2 = new dijit.layout.ContentPane({title: "tab 2"}); 
      tc.addChild(tab1); 
      tc.addChild(tab2); 
      bc.addChild(tc); 

      // put the top level widget into the document, and then call startup() 
      dojo.byId("inbox").addChild(bc.domNode); 
      bc.startup(); 
     }); 
    </script> 
    <div id="inbox" class="panel roundedCorners"> 
     <div id="inboxContainer" dojo-data-type="dijit.layout.BorderContainer"> 
     </div> 
    </div> 
</div>

我看不到任何这些小部件的越来越呈现，当我负载时的p的home.jspx模板年龄。此外，浏览器控制台显示错误：

dojo.byId("inbox").addChild is not a function 
[Break On This Error] 

dojo.byId("inbox").addChild(bc.domNode);

尽管配置了djconfig="parseOnLoad: true"配置。

更新：这里是我尝试的初始声明语法，但无法让它工作。

shopper.jspx：

<html xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:tiles="http://tiles.apache.org/tags-tiles" 
    xmlns:c="http://java.sun.com/jsp/jstl/core" 
    xmlns:spring="http://www.springframework.org/tags"> 
<jsp:output doctype-root-element="HTML" 
    doctype-system="about:legacy-compat" /> 
<jsp:directive.page contentType="text/html;charset=UTF-8" /> 
<jsp:directive.page pageEncoding="UTF-8" /> 
<jsp:output omit-xml-declaration="true" /> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
<link rel="stylesheet" 
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/nihilo/nihilo.css" 
    media="screen"/> 
<link rel="stylesheet" type="text/css" href="/resources/css/screen.css" /> 
<!-- load dojo and provide config via data attribute --> 
<script 
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" 
    data-dojo-config="async: true, parseOnLoad: true"> 
    <jsp:text></jsp:text> 
</script> 
<script type="text/javascript"> 
     dojo.require("dojo.parser"); 
     dojo.require("dijit.layout.BorderContainer"); 
     dojo.require("dijit.layout.TabContainer"); 
     dojo.require("dijit.layout.AccordionContainer"); 
     dojo.require("dijit.layout.ContentPane"); 
     dojo.require("dijit.layout.AccordionPane"); 
</script> 
<title>My Shopping</title> 
</head> 
<body class="nihilo"> 
    <tiles:insertAttribute name="header" /> 
    <tiles:insertAttribute name="submenu" /> 
    <tiles:insertAttribute name="body" /> 
    <tiles:insertAttribute name="footer" ignore="true" /> 
</body> 
</html>

声明home.jspx我从道场教程复制：

<?xml version="1.0" encoding="UTF-8" ?> 
<div id="page" xmlns:spring="http://www.springframework.org/tags" xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:form="http://www.springframework.org/tags/form"> 
    <jsp:directive.page contentType="text/html;charset=UTF-8" /> 
    <jsp:output omit-xml-declaration="yes" /> 
    <div id="inbox" data-dojo-type="dijit.layout.BorderContainer" style="width: auto; height:auto" > 
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Top pane</div> 
    <div data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="region:'leading'"> 
      <div data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div> 
      <div data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div> 
      <div data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div> 
    </div> 
    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center'"> 
      <div data-dojo-type="dijit.layout.ContentPane" title="tab #1">tab pane #1</div> 
      <div data-dojo-type="dijit.layout.ContentPane" title="tab #2">tab pane #2</div> 
      <div data-dojo-type="dijit.layout.ContentPane" title="tab #3">tab pane #3</div> 
    </div> 
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div> 
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div> 
    </div> 
</div>

在screen.css我已经定义如下：

body { 
    margin: 0; 
    padding: 0; 
    background-color: #EAECEE; 
    font-family: Verdana, sans-serif; 
    font-size: 12px; 
} 

#page { 
    background: #ffffff; 
    margin-left: auto; 
    margin-right: auto; 
    -moz-box-shadow: 0 0 5px 3px #999; 
    -webkit-box-shadow: 0 0 5px 3px #999; 
}

而且我没有得到任何小部件呈现在我访问该页面时。

修正：无视有关地方如何的dijit的div，我删除通过“页” applyed样式的事实DIV ID和固定的高度和宽度如下：

<div xmlns:spring="http://www.springframework.org/tags" xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:form="http://www.springframework.org/tags/form"> 
    <jsp:directive.page contentType="text/html;charset=UTF-8" /> 
    <jsp:output omit-xml-declaration="yes" /> 
    <div data-dojo-type="dijit.layout.BorderContainer" style="width: auto; height:600px;" >

来源

2012-03-08 Anadi Misra

您声明边框容器在标记中，并试图以编程方式创建一个容器。

试试这个：

变化

<div id="inboxContainer" dojo-data-type="dijit.layout.BorderContainer"> 
</div>

到

<div id="inboxContainer" style="width:800px; height: 600px"></div>

创建边框容器

var bc = new dijit.layout.BorderContainer({}, dojo.byId("inboxContainer")); 
... 
// dojo.byId("inbox").addChild(bc.domNode); // remove this

这行代码失败，因为dojo.byId回报一个domNode和一个domNode没有addChild方法。

我也改变了宽度和高度。使用高度：100％要求层次结构中的所有dom节点（html，body，roundedCorners，inbox）也具有高度：100％，并且我无法在发布的代码中验证是否属于这种情况，因此请将此消除现在通过指定直接高度来解决潜在的问题。有一次，它的工作，你可以改回它。

来源

2012-03-08 11:25:51

感谢克雷格......我基本上是在试着用数字来看看它是否适合用来声明性地布置小部件。但是，还有一个更大的问题。我尝试通过脚本来完成，因为我无法获得声明式的工作方式，使用声明式选项似乎更加方便，所以您还可以帮助解释为什么它不适用于我的页面？我修改了这个问题以包含原始的描述语法。 – 2012-03-10 06:00:55

得到它的工作！问题是我忽略dijit文档以及你提到的有关造型高度和宽度的内容。有时我倾向于学习困难的方式;-)。 – 2012-03-10 07:34:03

dijit的问题：这些组件还越来越呈现

回答

相关问题