dojoのdialogとformの最適な使い方について

http://zhenghaoju700.blog.163.com/blog/static/135859518201421893750677/
dojoのdialogコンポーネントを使用する場合、formフォームと一緒に使用することがよくあります.この場合、フォームを迅速に作成し、フォームをコミットし、フォーム項目を変更する機能が必要です.
dojoにおけるコンポーネントの書き方については,プログラミングの仕方と宣言の仕方に分けられ,宣言の仕方は速いがやや柔軟ではない場合があり,プログラミングの仕方は煩雑である場合がある.2つの方法を組み合わせてdialog宣言を使用してプログラミングを使用し、フォーム使用宣言を確立する必要があります.ディレクトリ構造:myModule-|                    |--- dialog.js                     |--- instance.html                     |--- volumn.htmlフォームの作成:instance.html(htmlクリップのみですがdijit/formフォームが含まれています)

<div data-dojo-type="dijit/form/Form" data-dojo-id="instance_Form"> 
 <table class="dijitDialogPaneContentArea">
 <tr>
 <td><label for="Name">Name:</label></td>
 <td><input data-dojo-type="dijit/form/TextBox" name="Name" id="instance_label"></td>
 </tr>
 <tr>
 <td><label for="Type">Type:</label></td>
 <td><input data-dojo-type="dijit/form/TextBox" name="Type" id="instance_Type"></td>
 </tr>
 <tr>
 <td>Properties:</td><td></td>
 </tr>
 <tr>
 <td><label for="ImageId">ImageId:</label></td>
 <td><input data-dojo-type="dijit/form/TextBox" name="ImageId" id="instance_ImageId"></td>
 </tr>
 <tr>
 <td><label for="InstanceType">InstanceType:</label></td>
 <td><input data-dojo-type="dijit/form/TextBox" name="InstanceType" id="instance_InstanceType"></td>
 </tr>
 <tr>
 <td><label for="KeyName">KeyName:</label></td>
 <td><input data-dojo-type="dijit/form/TextBox" name="KeyName" id="instance_KeyName"></td>
 </tr>
 <tr>
 <td><label for="UserData">UserData:</label></td>
 <td><input data-dojo-type="dijit/form/TextBox" name="UserData" id="instance_UserData"></td>
 </tr>
 </table>
</div>
<div class="dijitDialogPaneActionBar">
 <button data-dojo-type="dijit/form/Button" data-dojo-id="instance_Submit" type="button" id="instance_ok">OK</button>
 <button data-dojo-type="dijit/form/Button" data-dojo-id="instance_Cancel" type="button" id="instance_cancel">Cancel</button>
</div>

Dialog声明:dialog.js(ここではdojox.widget.DialogSimpleを使用しています.dojo/text!の使い方に注意してください)

define('myModule/dialog', ['dojox/widget/DialogSimple', "dojo/text!./instance.html", 
 "dojo/text!./volume.html", "dojo/text!./volumeAttachment.html", 'dijit/form/TextBox', 'dijit/form/Button'],
 function (Dialog, instance, volume, volumeAttachment) {
 var dialogs = {};
 var instanceDlg = new Dialog({ title:"Instance Configuration", style: "width: 400px", executeScripts:true, content: instance});
 instanceDlg.startup();
 dialogs.instance = instanceDlg;

 var volumeDlg = new Dialog({ title:"Volume Configuration", style: "width: 400px", executeScripts:true, content: volume});
 volumeDlg.startup();
 dialogs.volume = volumeDlg;

 var volumeAttachmentDlg = new Dialog({ title:"VolumeAttachment Configuration", style: "width: 400px", executeScripts:true, content: volumeAttachment});
 volumeAttachmentDlg.startup();
 dialogs.volumeAttachment = volumeAttachmentDlg;

 return dialogs
})

実際に使用:

require("myModule/dialog", function(dialogs){
 var dialog = dialogs.instance;
 //  children  html    
 var children = dialog.getChildren();
 var form = children[0];
 //  form  ，    setValues getValues，     .
 var submitButton = children[1];
 var cancelButton = children[2];

 submitButton.onClick = function(){
 var values = form.getValues(); 
 dialog.hide();
 };
 cancelButton.onClick = function(){
 dialog.hide();
 }; 
 dialog.show();
});

以上がdialogとformフォームを組み合わせて使用する最良の方法です.