ダイアログにdivを追加するにはどうすればいいですか？

Question

私はdijit/form/Buttonを作成し、それを私のページに追加しました。私がボタンを押したときには、例えばデータと他のボタンを備えたdataGridが必要です。私は新しいフォームを作成し、ドロップダウンメニューとその他のボタンを追加しました。今度はこのフォームにdataGridの2番目のフォームを追加したいと思います。これはどのように可能ですか？たとえば、コードは次のとおりです。

フォーム2を追加すると、最初のフォームのみが表示されますが、フォームおよびフォーム2は表示されません。どのようにして、最初のフォームにdataGridまたはdataGridの2番目のフォームをボタンで追加できますか？ 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

あなたのコードをカスタムウィジェットとして構造化したほうがよいでしょうが、学習曲線の初期段階ではあなたのように見えます。既存のダイアログにコンテンツを追加する少しの例があります。私はそれを正しく理解すれば

あなたDataGridの詳細（あなたはこれがほとんどdgridhttp://dgrid.ioによって推奨されていません知っている、右？）とDropDownMenu sが、あなたの元の質問には関係ありません。

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">