扩展标准的 Dijit 控件

Sanmao — Tue, 14 Apr 2009 03:24:46 +0000

标准的 Dojo 包中提供了很多 Dijit 控件，提供了各种丰富的功能。但是用户需求是多种多样的，总有些标准控件没有实现的部分。还好 Dojo 提供了多种扩展机制，以适应不同的场景。

接下来以为 dijit.Dialog 扩展一个简单的 setTitle 方法为例，介绍一下三种不同的方式。

1、使用 dojo.extend 直接修改 Dialog 的原型

dojo.require("dijit.Dialog");
dojo.extend(dijit.Dialog,{
     setTitle: function(/*string*/title){
         this.titleNode.innerHTML = title || "";
     }
});

2、使用 dojo.mixin 将 setTitle 添加到某个指定的 Dialog 实例

dojo.require("dijit.Dialog");
dojo.addOnLoad(function(){
     var dialog = new dijit.Dialog({ title:"test" });
     dialog.startup();
     dojo.mixin(dialog,{
          setTitle:function(title){
               this.titleNode.innerHTML = title || "";
          }
     });
});

3、使用 dojo.declare 定义一个继承自 Dialog 的子类

dojo.provide("my.Dialog");
dojo.require("dijit.Dialog");
dojo.declare("my.Dialog",dijit.Dialog,{
     setTitle:function(title){
          this.titleNode.innerHTML = title || "";
     }
});

在我的项目中也采用了这种方法，原因如下：一是它保留了原有 Dialog，没有对其进行修改；二是可以通过 inherited 实现往现有的方法中增加代码。例如为 show 方法增加一个判断条件：

dojo.require("dijit.Dialog");
dojo.declare("my.Dialog",dijit.Dialog,{
     canBeShown: true,
     // extend the default show() method
     show:function(){
            if(this.canBeShown){
                    this.inherited(arguments);
            }
     }
});

参考资料：Mucking Dijit

dijit – Sanmao的幸福(?)生活

扩展标准的 Dijit 控件