如何在dijit/对话框中显示？
我在一个数字/对话框中使用dgrid OnDemandGrid。我发布了对话框，但是网格没有显示。我可以看到网格应该出现的位置，但是网格本身没有在grid.startup()中发布。我认为这是因为我不明白事件是什么时候发生的，因此不能在正确的时间启动网格。
我正在为用户设置一个页面来定义目标。我想让他们把一个目标和另一个目标联系起来。
要做到这一点，我想发布一个包含现有目标网格的对话框，并让他们选择一个链接。即使我在页面上得到了一个目标网格，但是当我试图在对话框中对一个网格做同样的事情时，它却无法显示网格。
我使用dgrid在主页上形成一个网格，该代码可以显示现有目标的列表，如下所示.
HTML
<div>
<h4>Goals</h4>
<div id="goalgrid" class="grid"></div>
</div>脚本
require(["dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "dstore/Memory", "dijit/Dialog", "dijit/form/TextBox", "dijit/form/CheckBox", "dijit/form/Button", "dojo/dom", "dojo/on"],
function (declare, OnDemandGrid, Selection, Memory, Dialog, TextBox, CheckBox, Button, dom, on) {
var gridData = [
{ id: 1, goalName: "Top Goal", parentId: 0 },
{ id: 2, goalName: "Objective 1", parentId: 1 },
{ id: 3, goalName: "Objective 2", parentId: 1 }
];
gridStore = new Memory({data: gridData});
var grid = new (declare([ OnDemandGrid, Selection ]))({
collection: gridStore,
columns: {
id: "ID",
goalName: "Name",
parentId: "Parent"
}
}, "goalgrid");
grid.renderArray(gridData);
...此页面显示gridData中包含三个目标的目标标题和网格。
我尝试为这样的对话框添加代码：
echo '<div class="content">';
echo '<p>This page allows you to describe your goals.</p>
<div data-dojo-type="dijit/form/Form" id="connect-form" widgetid="form" lang="en" action="" method="">
<fieldset data-dojo-attach-point="part1">
<div class="event-input-text">
<h4>Goals</h4>
<div id="maingrid">Main grid for page, which shows data when dgrid is invoked on maingrid.</div>
</div>
<div id="buttonArea" style="padding:5em 0 0 15px;">
<input id="goa-link-button" name="submit" value="Link" type="button">
</div>
</fieldset>
</div>';
echo '</div>'; // end of content
echo '<script>
require(["dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "dstore/Memory", "dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button", "dojo/dom", "dojo/on"],
function (declare, OnDemandGrid, Selection, Memory, Dialog, TextBox, Button, dom, on) {
var linkGoalDialogContent = `
<div id="gldiv">
<ul>
<li>Sub-Goal ID: ID</li>
<li>Sub-Goal Name: Goal</li>
</ul>
<div id="goallist" class="listgrid">gridspace</div>
<div class=\"dijitDialogPaneActionBar\">
<input id="goa-link-goal-cancel-button" name="submit" value="Cancel" type="button">
<input id="goa-goal-link-button" name="submit" value="Link" type="button">
</div>
</div>`;
var goalGridData = [
{ id: 1, goalName: "Top Goal" },
{ id: 2, goalName: "Objective 1" },
{ id: 3, goalName: "Objective 2" }
];
var goalGridStore = new Memory({data: goalGridData});
var ggrid = new (declare([ OnDemandGrid, Selection ]))({
collection: goalGridStore,
columns: {
id: "ID",
goalName: "Name"
}
}, "linkGoalDialog.gldiv.goallist");
var linkGoalDialog = new Dialog({
id: "linkGoalDialog",
title: "Link Goal to New Parent Goal",
content: linkGoalDialogContent,
style: "width: 400px",
onShow: function() {
console.log("Show called on linkGoalDialog\n");
console.log("The goallist node has contents: "+dom.byId("goallist").innerHTML+"\n");
ggrid.startup();
console.log("The goallist node has contents: "+dom.byId("goallist").innerHTML+"\n");
},
onHide: function () {
console.log("Hide called on linkGoalDialog\n");
}
});
ggrid.startup();
on(dom.byId("goa-link-button"), "click", function(){
linkGoalDialog.show();
});
on(dom.byId("goa-link-goal-cancel-button"), "click", function(){
linkGoalDialog.hide();
});
on(dom.byId("goa-goal-link-button"), "click", function(){
linkGoalDialog.hide();
});
});
</script>';我还尝试了ggrid.renderArray(goalGridData)代替ggrid.startup()，但这两种方法都没有给出网格。当单击Link按钮时，控制台中的输出是goallist节点具有"gridspace“的内容，无论是在startup()之前还是之后。
事实上，对话框在页面上显示网格应该在的“网格空间”。
由于原始网格(此处未显示的代码)加载和显示正确，我怀疑我有时间问题或某种范围问题。
下面是我为此使用的自定义CSS：
.grid {
width: 700px;
height: 25em;
margin: 10px;
}
.listgrid {
width: 300px;
height: 5em;
margin: 10px;
}
.grid .dgrid-cell {
width: 80px;
}
.grid .field-id {
width: 10px;
}
.grid .field-goalName {
width: 100px;
}
.grid .field-parentId {
width: 15px;
}有人知道为什么对话框中的网格没有显示吗？谢谢你帮忙！
更新2020年5月3日
下面是我使用的版本：
1.2.1
- dojo-release-1.13.0
- 1.2.1
- dstore
值得注意的是，我通过将.tar.gz上传到web服务器并在那里解压缩来安装dgrid和dojo文件，但是我通过将.zip文件下载到我的.zip机器上、在那里解压缩并使用FTP复制到web服务器来安装dstore文件。
我是在WebsiteBaker-2_12_2.tar.gz的WebsiteBaker框架上下文中使用这些内容的。
在进行了更多的研究之后，我尝试在dialog.show()调用之后建立网格，如下所示：
on(dom.byId("goa-link-button"), "click", function(){
linkGoalDialog.show();
ggrid.renderArray(goalGridData);
});这不管用。我也在那里尝试过ggrid.startup()，但是它也不起作用。
更新2020年5月26日
经过更多的研究，我试着改变：
var linkGoalDialog = new Dialog({至
window.linkGoalDialog = new Dialog({从理论上讲，对话框应该放在窗口对象上，以便在cal之前呈现，以建立网格。但这也没用。
回答 1
Stack Overflow用户
发布于 2020-05-19 04:43:11
dgrid执行DOM维度计算，如果dgrid不可见，则该计算将失败。听起来你的对话就是这样。解决方案是在dgrid可见时调用startup/renderArray。在对话框打开并可见之后，尝试调用grid.renderArray(gridData)。
https://stackoverflow.com/questions/61549782
复制相似问题
腾讯云开发者
