如何在Dialog中添加div？

Question

我创建了一个dijit / form / Button并将其添加到我的页面。当我按下按钮时，应该有一个带有数据的dataGrid和其他更多功能的按钮。我创建了一个新表单并添加了一个下拉菜单和其他一些按钮。现在我想为这个表单添加一个dataGrid或dataGrid的第二个表单。这怎么可能？以下是代码示例：

var form = new Form({ 
    style: 'height: 100px'
});

new DropDownButton({
    dropDown: menu,
    label: "layers"
}).placeAt(form.containerNode);

var menu = new DropDownMenu({ style: "display: none" });

var menuItem1 = new MenuItem({
    label: "test",
    onClick: function () { alert("test"); }
});

menu.addChild(menuItem1);

new Button({
    label: "OK"
}).placeAt(form.containerNode);

new Button({
    label: "Cancel"
}).placeAt(form.containerNode);

dialog = new Dialog ({
    content: form,
    title: 'Title',
});

form.startup();

当我添加form2时，只显示第一个，但不显示form和form2。如何使用按钮将dataGrid或dataGrid的第二个表单添加到第一个表单。也许我应该为DOM添加一个新的div。但是如何在DOM中添加一个新的div到按钮？

Answer 1

我尝试了如下的form2：

var form = new Form({ 
style: 'height: 100px'
});

var form2 = new Form({
style: 'height: 100px'
});

var layout = [
{name: 'ID'},
{name: 'test'}
];

var grid = new DataGrid({
structure: layout
}).placeAt(form2.containerNode);

new DropDownButton({
dropDown: menu,
label: "layers"
}).placeAt(form.containerNode);

var menu = new DropDownMenu({ style: "display: none" });

var menuItem1 = new MenuItem({
label: "test",
onClick: function () { alert("test"); }
});

menu.addChild(menuItem1);

new Button({
label: "OK"
}).placeAt(form.containerNode);

new Button({
label: "Cancel"
}).placeAt(form.containerNode);

dialog = new Dialog ({
content: form,
title: 'Title',
});

form.startup();
form2.startup();

现在我不确定如何将form2添加到对话框的内容中。

Answer 2

说实话，最好将代码构建为自定义小部件，但它看起来像是学习曲线的早期部分。这是向现有Dialog添加内容的一个小例子。

你的DataGrid的详细信息（你知道dgrid http://dgrid.io已经弃用了它，对吗？）和DropDownMenus与你原来的问题无关，如果我理解正确的话。

require([
  'dijit/Dialog',
  'dijit/form/Form',
  'dijit/form/Button'
], function (Dialog, Form, Button) {
  
  document.body.className = 'claro';
  
  var form = new Form();
  
  var b1 = new Button({
    label: 'Click me'
  });
  
  b1.placeAt(form.domNode);
  
  b1.on('click', function () {
  
    // Now create some new content for the Dialog.
    // We have closure scope visibility of the dialog reference
    var form2 = new Form();
    var b2 = new Button({
      label: 'I am a second button (I do nothing)'
    });
    
    // Append the new content as children of the dialog's content
    dialog.containerNode.appendChild(b2.domNode);
  });
  
  var dialog = new Dialog({
    title: 'A dialog',
    content: form
  });
  dialog.startup();
  dialog.show();
});

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">