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