dojo使用笔记: 自定义ConfirmDialog

前言:

dojo1.10已经有了原生的ConfirmDialog

做gui应用开发,肯定要用到"确认"对话框, 无论是winForm, swing,还是web,也不管理你用什么技术. 在web开发中很多成熟的开发套件中肯定会有"确认对话框"这个组件, 但是如果你用dojo的话, 那就有点可惜了, 因为它没有, 如果因为这个事你很生气, 那是可以理解的, 因为大家都很生气, 所有在dojo官网的FAQ中,就有人问:

Dojo FAQ: Does Dijit have a confirm dialog?

当然, dojo的作者们有自己的理由:

No, Dijit does not provide pre-configured dialogs, like alert, confirm, or prompt.

Why? As simple as these may seem on the surface, each organization or application often needs something subtly different in terms of layout, appearance, behavior, events, and internationalization. Dojo and Dijit provide all the elements you need to make a variety of dialogs, including dijit/Dialog, dijit/form/Button, dojo/on, dojo/Deferred anddojo/i18n.

他们的解释的大概意思就是: 你们要的东西自己构建起来很简单的, 我们都给你们开发了这么多组件, 自己拼拼不会啊, 你们真是伸手党. 况且, 这个玩艺也没法做公用的啊, 每个公司都有自己的需求和界面.

我只能说,你妹啊, 我就想要个基本功能的就行了, 而且我是个新手菜鸟啊, 还得想怎么样开发一个. 牢骚发完了, 事还得做, 嗯 . 开始吧.

代码:

我要的东西很简单, 如下:

就是一个弹出确认框, 有两个按钮.

define([
"dojo/_base/declare",
"dijit/Dialog",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!./templates/ConfirmDialog.html",
"dojo/json",
"dojo/_base/lang",
"dojo/on",
"dojo/aspect",
"dijit/form/Button"
],function(
declare, Dialog, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin,
template, json, lang, on, aspect
){
var DialogContentPane = declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], { //........... 1
        templateString: template
    });

　var dialog = declare(Dialog, { //........... 2
        title: "警告",
        message: "您确认吗?",
        preventCache: true,
        constructor: function(kwArgs){
            lang.mixin(this, kwArgs);

            this.content = new DialogContentPane({parentDialog: this}); //.............. 3
        },
        startup: function(){
            this.inherited(arguments);
            var _this = this;
            on(this.content.cancelButton, "click", function(evt){//............ 4
                _this.hide();
                _this.no();
            });
            var signal = aspect.after(_this, "onHide", function(){//............. 5
                signal.remove();//......... 6
                _this.destroyRecursive();//........... 7
            });

        },
        onExecute: function(){//................8
            this.yes();
        }
    });

    return dialog;
});

代码说明:

我们需要一个要满足我们需求的Dialog, 但是不用从头构建一个, 所以这里直接继承了"dijit/Dialog", 如代码中 (2) 处. 为了构建出提示内容和两个按钮的界面, 我们要定义dialog的content属性. 见代码(2)处, 我们把自定义的widget实例赋值给content属性. 下面来看一下这个界面模板内容:

<div>

    <div class="dijitDialogPaneContentArea">
        <div data-dojo-attach-point="contentNode">${parentDialog.message}</div>
    </div>

    <div class="dijitDialogPaneActionBar">

        <button data-dojo-type="dijit.form.Button" type="submit">
            OK</button>

        <button data-dojo-type="dijit.form.Button"
            data-dojo-attach-point="cancelButton">Cancel</button>

    </div>

</div>

这个内容很简单, 就是显示要提示的信息(message变量), 还定义了两个按钮.

代码(4)的作用是绑定cancel按钮的click事件, 当点击这个按钮时, 我们要隐藏dialog, 并执行回调函数no()方法. 这个回调函数后面会提到. 代码(5)处, 我们拦截了onHide()方法,目的是当dialog隐藏时一定要销毁该dialog所占用的资源. 这是因为当dialog调用hide()方法时, 只是简单的把style的display置为none而也, 如果不销毁的话, 可能会引起内存溢出. 代码(6)处是取消本次拦截. 代码(7)处是调用dialog的销毁自己资源的方法. 代码(8)是监听dialog中确认按钮(OK)的点击事件, 它调用yes的回调方法.

至此, 整个Dialog的定义已经结束, 下面看下我们怎么使用:

var cd = new ConfirmDialog({
    message: "您确定删除此分组?",
    yes: function(){
        alert("yes...");
    },
    no: function(){
        alert("no...");
    }});
cd.show();

跟使用dijit/Dialog一样, 创建一个实例, 但是这里要定义两个回调用方法: yes()和no(), 分别是给用户点击了"OK"还是"Cancel"按钮时调用的. 比如, 我们一般可以在这个yes方法里进行一样ajax操作,如果远程删除服务器资源.

结束.

参考引用:

http://stackoverflow.com/questions/10401512/dojo-dialog-with-confirmation-button/10405938#10405938

http://jsfiddle.net/wkydY/205/