Dojo 1.7：BorderContainer和ContentPanes无法在自定义小部件模

发布时间：2020-12-16 21:58:33 所属栏目：百科来源：网络整理

导读：这类似于已经在这里的 question,但我正在使用Dojo 1.7.所以,我不能让BorderContainer和ContentPanes在自定义小部件模板中工作.这让我很生气.我尝试添加其他帖子中建议的mixins,但它没有用. 所以我有两个例子.第一个是以声明方式使用dojo的单个页面,它工作正

这类似于已经在这里的 question,但我正在使用Dojo 1.7.所以,我不能让BorderContainer和ContentPanes在自定义小部件模板中工作.这让我很生气.我尝试添加其他帖子中建议的mixins,但它没有用.

所以我有两个例子.第一个是以声明方式使用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 browser
window.仍然与第一个例子不同但更好.

非常感谢

这是第一个有效的例子

<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>并在小部件启动期间替换它,作为一般可重用性的东西.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!