[英]Dojo Dialog with confirmation button
I would like to add a generic dialog with "Ok" and "Cancel" buttons support callback functions. 我想添加一个通用对话框,其中“Ok”和“Cancel”按钮支持回调函数。
How can I achieve this with a Dojo AMD? 如何使用Dojo AMD实现这一目标?
For example: 例如:
myDialog = new Dialog ({
title: "My Dialog",
content: "Are you sure, you want to delete the selected Record?",
style: "width: 300px",
onExecute:function(){ //Callback function
console.log("Record Deleted")
},
onCancel:function(){
console.log("Event Cancelled") }
});
// create a button to clear the cart
new Button({ label:"Ok"
onClick: myDialog.onExecute()
}
new Button({ label:"Cancel"
onClick: function(){ myDialog.onCancel() }
}
Here is the solution I came up when I had been facing the same question. 这是我遇到同样问题时提出的解决方案。 It's not completely programmatic, but using the template makes the code more readable and flexible for changes.
它不是完全程序化的,但使用模板使代码更易读,更灵活。
Better to see once than to hear 100 times, so see all the code below live at jsFiddle: http://jsfiddle.net/phusick/wkydY/ 最好只看一次,而不是听100次,所以看下面的所有代码住在jsFiddle: http : //jsfiddle.net/phusick/wkydY/
The main principle I employ is the fact that dijit.Dialog::content
may not only be a string, but also a widget instance. 我使用的主要原则是
dijit.Dialog::content
不仅可以是字符串,还可以是小部件实例。 So I subclass dijit.Dialog
to declare ConfirmDialog
class. 所以我将
dijit.Dialog
子类dijit.Dialog
声明ConfirmDialog
类。 In ConfirmDialog::constuctor()
I declare and instantize a widget from a template and set it to be dialog's content. 在
ConfirmDialog::constuctor()
我从模板声明并实例化一个小部件,并将其设置为对话框的内容。 Then I wire onClick
actions in ConfirmDialog::postCreate()
method: 然后我在
ConfirmDialog::postCreate()
方法中连接onClick
动作:
var ConfirmDialog = declare(Dialog, {
title: "Confirm",
message: "Are you sure?",
constructor: function(/*Object*/ kwArgs) {
lang.mixin(this, kwArgs);
var message = this.message;
var contentWidget = new (declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template, //get template via dojo loader or so
message: message
}));
contentWidget.startup();
this.content = contentWidget;
},
postCreate: function() {
this.inherited(arguments);
this.connect(this.content.cancelButton, "onClick", "onCancel");
}
})
The template markup: 模板标记:
<div style="width:300px;">
<div class="dijitDialogPaneContentArea">
<div data-dojo-attach-point="contentNode">
${message}
</div>
</div>
<div class="dijitDialogPaneActionBar">
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="submitButton"
type="submit"
>
OK
</button>
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="cancelButton"
>
Cancel
</button>
</div>
</div>
Now use ConfirmDialog
instead of dijit.Dialog
: 现在使用
ConfirmDialog
而不是dijit.Dialog
:
var confirmDialog = new ConfirmDialog({ message: "Your message..."});
confirmDialog.show();
Important: Do not forget to disconnect any connects to the dialogs callbacks and destroy dialog when closed. 重要提示:关闭时不要忘记断开对话框回调和销毁对话框的任何连接。
If you use ConfirmDialog
often and in multiple places of your code consider this: 如果您经常在代码的多个位置使用
ConfirmDialog
,请考虑以下事项:
var MessageBox = {};
MessageBox.confirm = function(kwArgs) {
var confirmDialog = new ConfirmDialog(kwArgs);
confirmDialog.startup();
var deferred = new Deferred();
var signal, signals = [];
var destroyDialog = function() {
array.forEach(signals, function(signal) {
signal.remove();
});
delete signals;
confirmDialog.destroyRecursive();
}
signal = aspect.after(confirmDialog, "onExecute", function() {
destroyDialog();
deferred.resolve('MessageBox.OK');
});
signals.push(signal);
signal = aspect.after(confirmDialog, "onCancel", function() {
destroyDialog();
deferred.reject('MessageBox.Cancel');
});
signals.push(signal);
confirmDialog.show();
return deferred;
}
Your code will be more readable and you will not have to deal with cleaning up: 您的代码将更具可读性,您无需处理清理:
MessageBox.confirm().then(function() {
console.log("MessageBox.OK")
});
Here's how to use dijit/ConfirmDialog
and configure its buttons. 以下是如何使用
dijit/ConfirmDialog
并配置其按钮。
require(["dijit/ConfirmDialog"], function(ConfirmDialog){
// create instance
var dialog = new ConfirmDialog({
title: "Session Expiration",
content: "the test. Your session is about to expire. Do you want to continue?",
style: "width: 300px"
});
// change button labels
dialog.set("buttonOk","Yes");
dialog.set("buttonCancel","No");
// register events
dialog.on('execute', function() { /*do something*/ });
dialog.on('cancel', function() { /*do something*/ });
// show
dialog.show();
});
Dojo 1.10包含一个带有内置OK和Cancel按钮的新dijit / ConfirmTooltipDialog 。
Dojo Confirm Dialog is very simple and helpful. Dojo Confirm Dialog非常简单且有用。
http://dojotoolkit.org/reference-guide/1.10/dijit/ConfirmDialog.html http://dojotoolkit.org/reference-guide/1.10/dijit/ConfirmDialog.html
require(["dijit/ConfirmDialog", "dojo/domReady!"], function(ConfirmDialog){
myDialog = new ConfirmDialog({
title: "My ConfirmDialog",
content: "Test content.",
buttonCancel: "Label of cancel button",
buttonOk: "Label of OK button",
style: "width: 300px",
onCancel: function(){
//Called when user has pressed the Dialog's cancel button, to notify container.
},
onExecute: function(){
//Called when user has pressed the dialog's OK button, to notify container.
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.