扩展Dojo 0.9之Resizable Dialog

虽然对dojo的诟病多多，但是我还是选择了Dojo，原因就是它的扩展性很好。我可以在它的基础之上编写高品质的js代码。Ext虽然cool毙，但是别说扩展，即使要修改它的css也是困难多多，再有就是它那480多k的js文件也让人头痛。dojo最新的0.9版本的体积比以前(150多k)小了很多(50k)，作者还声称性能也大大提高了，考虑到以前在dojo上的投入，本人决定仍然使用dojo。
但是dojo0.9的向上兼容性很差，底层的API好像重写了。而且目录的结构也大为不同，唉，没办法谁让俺上了贼船了，改吧。
对于Dojo的widgets，用的最多的是Dialog和FilteringTable，新版的这两个widget弱化了很多，尤其是FilteringTable。今天就先修改Dialog。
dojo分为4个目录：
dojo-是dojo的底层API
dojox-扩展API，包括一些widget，比较有用的是FloatingPane。
dijit-提供了一些widget，新版的dialog就在这个目录下，除了一般的Dialog功能外，还提供了ToolTipDialog，效果还是很cool的。BTW，dojo的作者是一个美工盲，做的例子毫无吸引力，难怪粉丝们都跑到Ext那边了。但是，新版的Dialog缺少了一个最重要的功能：resizable，好吧，就给他加上这个功能，顺便美化美化。其实dojo0.9有ResizeHandle这个widget，位于dojox.layout下，同一个包中的FloatingPane.js演示了如何使用ResizeHandle，把Dialog和FloatingPane结合一下就搞定了。
首先在dojox目录下新建一个sam目录，作为扩展文件的目录。然后在Sam下新建一个Dialog.js文件：

js 代码

if(!dojo._hasResource["dojox.sam.Dialog"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.sam.Dialog"] = true;
dojo.provide("dojox.sam.Dialog");

dojo.require("dojo.dnd.move");
dojo.require("dojo.fx");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.Dialog");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Form");
dojo.require("dojox.layout.ResizeHandle");

dojo.declare(
    "dojox.sam.DialogUnderlay",
    [dijit.DialogUnderlay],
    {
    }
);

dojo.declare(
    "dojox.sam.Dialog",
    [dijit.Dialog, dijit._Templated, dijit.form._FormMixin],
    {
        // SAM: add resizeHandle node.
        templateString: null,
        templateString:"很长，看附件吧",

      // resizable: Boolean
      // allow resizing of pane true/false
      //SAM:add resizable property
      resizable: false,

      // resizeAxis: String
      //    x | xy | y to limit pane's sizing direction
      //SAM:add resizeAxis
      resizeAxis: "xy",

        postCreate: function(){
            dojox.sam.Dialog.superclass.postCreate.apply(this, arguments);

            //SAM: Display resizeHandle or not
            if(!this.resizable){
              this.resizeHandle.style.display = "none";
          }
        },
        //SAM:override super's method, enable resize handle.
        startup: function(){
            dojox.sam.Dialog.superclass.startup.call(this);

            if (this.resizable) {
                this.containerNode.style.overflow = "auto";
                var tmp = new dojox.layout.ResizeHandle({
                    //targetContainer: this.containerNode,
                    targetId: this.id,
                    resizeAxis: this.resizeAxis
                },this.resizeHandle);
            }
    }
});
}

这个Dialog.js继承了dijit.Dialog，所以只写了很少代码。
下面是美化，在dojox/sam下建resources/images目录，用于存放dialog的化妆品。打开ff的Dom查看器(或者看templateString)，挨个找到所需的css的名字，然后自己建css，需要注意的是，dojo0.9中实现模式对话框的背景的css位于dijit/themes/dijit.css下，找了很久才找到。把这些css整合到一起，然后按着Ext的样子重写就OK了。
呵呵，现在的dojo修改样式实在是简单多了，0.4以前css是写在js文件中的，修改起来那叫一个费尽，还要提防它升级。
这样，我们就完成对Dialog的升级，效果可以看附件中的tests，记着把附件中的sam目录放到dojo的dojox目录下。
下一次要做一个独立的Widget——Paginator

评论

6 楼 mybird 2008-07-14  

在1.1.1下无法运行

5 楼 鹤惊昆仑 2008-01-19  

楼主的扩展在0.9版本可以正常使用。但在1.0.0版本无法正常使用。我做了一点微小的修正，使之可以在1.0.0版本下自由伸缩（见附件）。感谢cats_tiger！

4 楼 hmjlq 2007-11-20  

你的代码有问题啊：
如果这样
var dd = new dojox.sam.Dialog();
dojo.style(dd.domNode, "width", "250px");
dojo.style(dd.domNode, "height", "250px");
//dojo.style(dd.resizeHandle, "display", "block");
//dd.domNode.style = "width:250px; height:250px;";
dd.show();
出来的dialog不能调整大小

3 楼 ado88 2007-09-15  

wangjj_0016:

我试验了一下没有问题,你一定是把路径搞错了,.要放到dojox文件夹下面

2 楼 cats_tiger 2007-08-29  

啥米问题？说清楚嘛。

1 楼 wangjj_0016 2007-08-28  

大哥，你的代码有问题啊