About Dojo’s Dialog and Form’s best usage

By Dojo

http://zhenghaoju700.blog.163.com/blog/static/135859518201421893750677/

When using the dialog component in dojo, we often encounter the situation of using it with the form. At this time, you need to quickly create the form, submit the form and modify the function of the form item.

The writing method of components in dojo is divided into programming method and declarative method. The declarative method is fast but sometimes slightly inflexible, and the programming method is sometimes very cumbersome.

所以需要将两种方式结合起来使用
dialog声明使用编程方式，建立表单使用声明方式:
目录结构:
myModule -|
                    |— dialog .js
                    |— instance.html
                    |— volumn.html

建立表单: instance.html (仅仅是一个html片段，但是里面包含了dijit/form表单) 

 data-dojo-type="dijit/form/Form"  data-dojo-id="instance_Form"> 
  class="dijitDialogPaneContentArea">
 
  for="Name">Name:< /span>
  data-dojo-type="dijit/form/TextBox" name ="Name" < span class="atn" style="line-height:31.1499977111816px; color:rgb(102,0,102)">id="instance_label">
 
 
  for=< span class="atv" style="line-height:31.1499977111816px; color:rgb(0,136,0)">"Type">Type: 
  data-dojo-type="dijit/form/TextBox" name="Type" id< /span>="instance_Type">
 
< span class="pln" style="line-height:31.1499977111816px; color:rgb(0,0,0)"> 
 Properties:< br style="line-height:31.1499977111816px"> 
 
  for="ImageId">ImageId:
  data-dojo-type="dijit/form/TextBox" name="ImageId" id="instance_ImageId">
  
  
  < span class="atn" style="line-height:31.1499977111816px; color:rgb(102,0,102)">for="InstanceType">InstanceType:
  data-dojo-type="dijit/form/TextBox" name="InstanceType"  id="instance_InstanceType">
 
 
  for="KeyName">KeyName:< span class="tag" style="line-height:31.1499977111816px; color:rgb(0,0,136)">
   data-dojo-type="dijit/form/TextBox" name="KeyName" id< span class="pun" style="line-height:31.1499977111816px; color:rgb(102,102,0)">="instance_KeyName">
 
 
  for="UserData" >UserData: label>
  data-dojo-type="dijit/form/TextBox " name="UserData" id="instance_UserData">< /span>

class="dijitDialogP aneActionBar">
data-dojo-type="dijit/form/ Button" data-dojo-id="instance_Submit" < /span>type="button" id="instance_ok">OK
data-dojo-type="dijit/form/Button" data-dojo- id="instance_Cancel" type="button" id="instance_cancel">Cancel

Dialog statement: again Take a look at dialog.js (dojox.widget.DialogSimple is used here, pay attention to the usage of dojo/text!) 

define('myModule/dialog'< /span>, [ 'dojox/widget/DialogSimple', < /span>"dojo/text!./instance.html", 
 "dojo/text!./volume.html", "dojo/text!./volumeAttachment.html" , 'dijit/form/TextBox'< /span>,  'dijit/form/Button'],
 function< span class="pln" style="line-height:31.1499977111816px; color:rgb(0,0,0)"> (Dialog, instance, volume , volumeAttachment) span> {
 var dialogs = {};
 var instanceDlg = span> 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});
 v olumeDlg.startup();
 dialogs.volume = volumeDlg;

 var volumeAttachmentDlg = new Dialog({ title:"VolumeAttachm ent 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[< span class="lit" style="line-height:31.1499977111816px; color:rgb(0,102,102)">0];
 //通过form表达，我们可以setValues和getValues，还可以校验.
 var submitButton = children[1];
 var cancelButton = children[2];

 submitButton.onClick = function(){
 var values = form.getValues(); 
 dialog.< span class="pln" style="line-height:31.1499977111816px; color:rgb(0,0,0)">hide();
 };
 cancelButton.onClick = function(){
 dialog.hide();
 }; 
 dialog.show();
});

以上就是dialog和form表单结合使用的最佳方式。