javascript - 如何向对话框添加div？

Question

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

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。但是如何将新的 div 添加到按钮的 DOM 中呢？

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 添加到对话框的内容中。