道场 1.7 : BorderContainer and ContentPanes not working inside of a custom widget template-6ren

道场 1.7 : BorderContainer and ContentPanes not working inside of a custom widget template

转载作者：行者123 更新时间：2023-12-04 16:55:19

这类似于 question已经在这里，但我使用的是 Dojo 1.7。因此，我无法在自定义小部件模板中使用 BorderContainer 和 ContentPanes。它让我发疯。我尝试添加另一篇文章中建议的mixin，但没有用。

所以我有两个例子。第一个是声明性地使用 dojo 的单个页面，它工作正常。第二个示例是完全相同的页面，但我使用了一个小部件来嵌入模板。它呈现小部件，但它们都粘在右上角。相同的页面，相同的样式。但是，当我调整浏览器窗口的大小时，页面就会成形。仍然有一些缺失，但它更好

screenshot here for first example using dojo declaratively

screenshot here for second example using a widget

screenshot here for second example after resizing the browserwindow .仍然与第一个示例不同，但更好。

非常感谢

这是第一个例子，有效

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo: Application Controller</title>
    <link rel="stylesheet" href="/js/tag/widgets/BorderWidget/css/demo.css" media="screen">
    <link rel="stylesheet" href="/js/tag/widgets/BorderWidget/css/style.css" media="screen">
    <link rel="stylesheet" href="/js/dijit/themes/claro/claro.css" media="screen">

    <!-- Configure Dojo -->
    <script type="text/javascript">
      var djConfig = {
        isDebug : true,
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="/js/dojo/dojo.js"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("dijit.layout.ContentPane");
    </script>
  </head>
  <body class="claro">
    <div style="height:100%">
      <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
        <div class="centerPanel" id="tabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center', tabPosition: 'bottom'">
          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'About'">
            <h2>Flickr keyword photo search</h2>
            <p>
              Each search creates a new tab with the results as thumbnails
            </p>
            <p>
              Click on any thumbnail to view the larger image
            </p>
          </div>
        </div>
        <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
          <div class="searchInputColumn">
            <div class="searchInputColumnInner">
              <input id="searchTerms" placeholder="search terms">
            </div>
          </div>
          <div class="searchButtonColumn">
            <button id="searchBtn">
              Search
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

这是使用小部件 的第二个示例

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo: Application Controller</title>
    <link rel="stylesheet" href="/js/tag/widgets/BorderWidget/css/demo.css" media="screen">
    <link rel="stylesheet" href="/js/tag/widgets/BorderWidget/css/style.css" media="screen">
    <link rel="stylesheet" href="/js/dijit/themes/claro/claro.css" media="screen">

    <!-- Configure Dojo -->
    <script type="text/javascript">
      var djConfig = {
        isDebug : true,
        parseOnLoad : true,
        paths : {
          'tag' : '../tag/widgets/BorderWidget'
        }
      };
    </script>
    <script type="text/javascript" src="/js/dojo/dojo.js"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require('tag.Widget');

      dojo.ready(function() {
        new tag.Widget().startup();
      });
    </script>
  </head>
  <body class="claro">

  </body>
</html>

这是小部件代码

define('tag/Widget', 
[
  'dojo', 
  'dijit/_Widget', 
  'dijit/_TemplatedMixin', 
  'dijit/_WidgetsInTemplateMixin',
  'dijit/layout/BorderContainer',
  'dijit/layout/TabContainer',
  'dijit/layout/ContentPane'
], 
function(d) {
  //The widget contructor will be returned
  return d.declare('tag.Widget', 
  [
    dijit._Widget, 
    dijit._TemplatedMixin, 
    dijit._WidgetsInTemplateMixin
  ], 
  {
    templateString : d.cache("tag", "templates/template.html"),

    postCreate : function() {
      this.inherited(arguments);
      var domNode = this.domNode;
    },

    startup : function(args) {
      this.inherited(arguments);
      this.placeAt(dojo.doc.body);
    }


  });
});

这是小部件的模板

<div style="height:100%">
  <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
    <div class="centerPanel" id="tabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center', tabPosition: 'bottom'">
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'About'">
        <h2>Flickr keyword photo search</h2>
        <p>
          Each search creates a new tab with the results as thumbnails
        </p>
        <p>
          Click on any thumbnail to view the larger image
        </p>
      </div>
    </div>
    <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
      <div class="searchInputColumn">
        <div class="searchInputColumnInner">
          <input id="searchTerms" placeholder="search terms">
        </div>
      </div>
      <div class="searchButtonColumn">
        <button id="searchBtn">
          Search
        </button>
      </div>
    </div>
  </div>
</div>

最佳答案

您可能需要在自己的 startup() 中显式调用 BorderContainer 和 ContentPane 布局小部件上的启动。方法。此外，您可能希望始终拥有 this.inherited(arguments)如果您要覆盖和继承方法，则在任何小部件生命周期方法中。

startup : function(args) {
    this.inherited(arguments);
    //console.log('asdasd')
    dojo.empty("body");
    this.placeAt('body');

    this.subContainerWidget.startup();
    //I think the border container will automatically call startup on its children 
    //(the content panes), but you may also need to call startup on them.
}

另外，正如@missingno 提到的，您可能不想清空 <body>并在小部件启动期间替换它，作为一般的可重用性。

关于道场 1.7 : BorderContainer and ContentPanes not working inside of a custom widget template，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7915364/

文章推荐：列出所有当前数据库属性的 SQL 语句

文章推荐： date - 将日期从 yyyy-mm-dd 转换为日-月-日

文章推荐： forms - 在非对象上调用成员函数 allow() - 授权

layout - DOJO ContentPane 内部 DIV 高度在 ContentPane 调整大小时发生变化
我正在使用 DOJO 的 ContentPane模块。我有一个 div一个 Pane 中的元素，我需要给它一个特定的高度 - 比 ContentPane 的高度小 100 像素使div当您更改 Con
javascript - BorderContainer dojo，顶部有 2 个 ContentPane，底部有 1 个 ContentPane
我想要一个具有以下结构的 BorderContainer: 我有这个代码，但它不起作用。底部的高度不起作用，所以我不知道如何修复它。 this.bc = new Bor
javascript - dojo contentPane，我在我的 ContentPane 中发布带有 href 的 html 代码。 html代码有脚本但不起作用，为什么？
我在我的应用程序中使用 dojo 1.9。我在我的 ContentPane 中发布带有 href 的 html 代码。 html 代码有脚本但不起作用。 index.html代码:
java - 指定顶级容器的 ContentPane 有优势吗？
我试图摆脱使用 NetBeans 创建简单的 Swing GUI，因此试图更好地理解整个容器/布局机制。我一直在阅读各种内联内容，尤其是 https://docs.oracle.com/javase/
java - 添加对象时 ContentPane 背景颜色发生变化
我有以下代码: import java.awt.*; import javax.swing.*; import java.util.ArrayList; import java.util.List;
java - 更改 ContentPane 的背景颜色
我正在开发 GUI，并且在 Pane 方面没有遇到任何问题。我的 GUI 分为两部分(topPane 和 bottomPane)。我的两个 Pane 上都有按钮和标签，但其中一个按钮功能我想更改背
java - 框架 JButton、ContentPane
我的代码有问题，因为我想做的就是显示文本字段和底部的按钮，所以我使用了:setLayout(new FlowLayout()); 但我遇到了一个错误，所以我决定更改为 getContenPane();
Java Swing ContentPane 令人困惑的语句
同样的事情有两种方式。这些行有什么不同？第1条语句中使用了 getContentPane() 方法，它的目的是什么？这是第二个陈述的简写 JLabel lblNewLabel = new JLabe
javascript - 设置 ContentPane 内容时如何保留旧内容
显然，在设置 ContentPane 的 content 属性时，Dojo 会做一些清理工作。例如:如果我将 content 设置为小部件 A，然后将 content 设置为小部件 B，则小部件 A
javascript - Dojox ContentPane 样式不起作用
我有 2 个 html 页面 A 和 B。页面 A 有一个 dojox/layout/contenpane 如下: 我正在使用 ContentPane 的 href 属性(使用 XHR)在 A 中加
Java - 在 contentPane 容器中显示标题
我是新手，因此非常感谢建议和帮助。似乎无法让我的容器 contentPane 显示标题。我的代码: class CreateStockCodeDetails extends JFrame impl
java - 创建一个圆形的 JFrame/ContentPane
我正在用 java 创建一个带有圆角的登录窗口。一切正常，请参见图片，但我在使 JFrame/ContentPane 透明方面遇到了挑战。每个角落都有白色区域(如箭头所示)，我似乎无法删除这些区域，因
dojo - 调整大小结束时的 dijit/layout/ContentPane？
我现在使用的是 dojo 1.8.3，现在我的页面上有一个带有 2 ContentPane 的 BorderContainer。我想听resize事件，代码是这样的 dojo.ready(functi
javascript - 在 Dojo ContentPanes 中动态加载小部件
我有一个 JSP 页面，其中 TabContainer 中有 6 个自定义小部件。代码看起来像这样: Registries"> ...(5 more Co
java - 为什么 .validate() 不会更新此代码中的 contentPane？
我在使用 contentPane 时遇到问题。这是有问题的代码: public void graph() { JFrame frame = new JFrame("Graph"); G
java - 如何在不使用 main 方法或调用其他方法的情况下设置 contentPane？
据我了解，以下内容设置了 contentPane 的背景颜色。如何将图片设置为背景？我已经尝试过这些: Setting background images in JFrame JAVA: Ways
java - 无法更改 JFrame ContentPane 的背景颜色
所以我在java中有一个snake程序，工作完美，但是在我的Frame类中我无法更改我的JFrame内容 Pane 的背景颜色，我使用getContentPane()。 setBackground(C
java - contentpane.removeAll 不会删除 JPanel
我有一个带有启动按钮的 JPanel，当按下该按钮时，它会通过 mainFrame 调用 Controller 中的 start() 函数 public void actionPerformed(Ac
javascript - 如何以编程方式滚动到 dojo contentPane 中的某个元素
我在 dojo.contentPane 中显示了 100 多个 li 元素的 ul 列表，它显示在扩展 dojo 对话框的自定义对话框中。呈现此 contentPane 时，我希望滚动条自动滑动到第
javascript - dojo/dijit ContentPane 设置内容
我正在尝试将通过 dojo.XHRGet 检索到的一些 XML 附加到 dijit.layout.ContentPane。在 Firefox (3.6) 中一切正常，但在 Chrome 中，我只会在特

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

道场 1.7 : BorderContainer and ContentPanes not working inside of a custom widget template