注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

关于dojo的dialog和form的最佳用法  

2014-03-18 22:02:17|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在使用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表单结合使用的最佳方式。

参考资料:
http://dojotoolkit.org/reference-guide/1.9/dojox/widget/DialogSimple.html#dojox-widget-dialogsimple

  评论这张
 
阅读(2451)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017