关于dojo的dialog和form的最佳用法
2015-10-16 22:28
375 查看
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!的用法)
实际使用:
以上就是dialog和form表单结合使用的最佳方式。
在使用dojo中dialog组件时,经常会遇到和form表单一同使用的情况,这时候就需要快速的建立表单,提交表单和修改表单项的功能。
关于dojo中组件的写法分为编程的方式和声明方式,声明方式快速但是有时候略显不灵活,编程的方式有时候又会很繁琐。
所以需要将两种方式结合起来使用
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表单结合使用的最佳方式。
相关文章推荐
- ios中关于UIImagePickerController的一些知识总结
- XML 文档(1, 2)中有错误:不应有 <xml xmlns=''>
- IOS应用接iOS聚合支付(SDK集成说明)
- linux 一些命令学习(1)-- 管道与重定向
- SPFA邻接表-POJ-1511-Invitation Cards
- QEventLoop 的使用两例
- mysql 索引探索
- Java多线程机制详解
- KMP-看毛片算法
- 2015-10-16
- VBScript基础
- 软件测试需求管理
- 如何让 Qt 的程序使用 Sleep(主线程没有Sleep函数,但线程可用自带的保护函数Sleep)
- Oracle SQL 调优之 sqlhc
- Swift2.0新特性
- dfs:跳马问题
- 将Matlab GUI 文件打包成独立运行的exe程序的步骤
- 屏幕共享软件使用方法
- JSON的操作之js中json转换
- 学习日志---linux 磁盘与内核关系以及分区