关于dojo的dialog和form的最佳用法
来源:互联网 发布:新歌声网络直播地址 编辑:程序博客网 时间:2024/05/19 02:27
http://zhenghaoju700.blog.163.com/blog/static/135859518201421893750677/
在使用dojo中dialog组件时,经常会遇到和form表单一同使用的情况,这时候就需要快速的建立表单,提交表单和修改表单项的功能。
关于dojo中组件的写法分为编程的方式和声明方式,声明方式快速但是有时候略显不灵活,编程的方式有时候又会很繁琐。所以需要将两种方式结合起来使用
dialog声明使用编程方式,建立表单使用声明方式:
目录结构:
myModule -|
|--- dialog.js
|--- instance.html
|--- volumn.html
建立表单: instance.html (仅仅是一个html片段,但是里面包含了dijit/form表单)
Dialog声明: 再看看dialog.js(这里使用了dojox.widget.DialogSimple,注意dojo/text!的用法)<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>
实际使用: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
})
以上就是dialog和form表单结合使用的最佳方式。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();});
- 关于dojo的dialog和form的最佳用法
- dojo的dojo.data.ItemFileReadStore和dijit.form.FilteringSelect 动态更新的问题
- 关于JavaScript和Dojo的一点备忘
- 关于activity绑定的dialog的用法
- 关于Dojo的Grid
- 关于dojo的认识
- 关于DOJO的介绍
- dojo-dijit.form.Button的使用
- Dojo关于dijit/form/CheckBox序列化的疑问?请大侠指教
- dojo/dom-attr的用法
- 关于dojo的build系统
- 关于Namespace, YUI和Dojo对此问题的异同
- 关于Content-Type中application/x-www-form-urlencoded 和 multipart/form-data的区别及用法
- Android Dialog的用法
- Dialog 的用法
- Menu,dialog的用法
- Dialog的用法
- HTML中的<form>和<input>的用法
- Error:JDK1.8 Cannot change version of project facet Dynamic Web Module to 3.1.
- Eclipse WEB项目部署缺少classes文件
- IOS应用接iOS聚合支付(SDK集成说明)
- linux 一些命令学习(1)-- 管道与重定向
- SPFA邻接表-POJ-1511-Invitation Cards
- 关于dojo的dialog和form的最佳用法
- Codeforces Round #326 (div2)
- maven新手推荐——maven实战
- C基础—内存
- matlab GUI程序转换成exe可执行文件
- hdu3416(SAP网络流)
- opencv:未经处理的异常、RPC服务器不可用、cv::exception问题
- 游戏开发者如何使用3D Touch
- Java开源资源