Это похоже на вопрос уже здесь, но я использую Dojo 1.7. Итак, я не могу заставить BorderContainer и ContentPanes работать внутри настраиваемого шаблона виджета. Это сводит меня с ума. Я попытался добавить миксины, предложенные в другом посте, и это не сработало.
Итак, у меня есть два примера. Первый - это одна страница, декларативно использующая додзё, и она отлично работает. Второй пример - это точно такая же страница, но я использую виджет для встраивания шаблона. Он отображает виджеты, но все они склеены в правом верхнем углу. Та же страница, те же стили. НО, когда я изменяю размер окна браузера, страница принимает форму. Еще не хватает бит, но так лучше
снимок экрана для первого примера декларативного использования dojo
снимок экрана для второго примера после изменения размера окна браузера. Все еще не то же самое, что и в первом примере, но лучше.
Большое спасибо
Это первый пример, который работает
<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>