扩展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 代码

 

1. if(!dojo._hasResource["dojox.sam.Dialog"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.  
2. dojo._hasResource["dojox.sam.Dialog"] = true;  
3. dojo.provide("dojox.sam.Dialog");  
4.   
5. dojo.require("dojo.dnd.move");  
6. dojo.require("dojo.fx");  
7.   
8. dojo.require("dijit._Widget");  
9. dojo.require("dijit._Templated");  
10. dojo.require("dijit.Dialog");  
11. dojo.require("dijit.layout.ContentPane");  
12. dojo.require("dijit.form.Form");  
13. dojo.require("dojox.layout.ResizeHandle");   
14.   
15. dojo.declare(  
16.     "dojox.sam.DialogUnderlay",  
17.     [dijit.DialogUnderlay],  
18.     {  
19.     }  
20. );  
21.       
22. dojo.declare(  
23.     "dojox.sam.Dialog",  
24.     [dijit.Dialog, dijit._Templated, dijit.form._FormMixin],  
25.     {  
26.         // SAM: add resizeHandle node.  
27.         templateString: null,  
28.         templateString:"很长，看附件吧",  
29.           
30.       // resizable: Boolean  
31.       // allow resizing of pane true/false  
32.       //SAM:add resizable property  
33.       resizable: false,  
34.   
35.       // resizeAxis: String  
36.       //    x | xy | y to limit pane's sizing direction  
37.       //SAM:add resizeAxis  
38.       resizeAxis: "xy",  
39.                   
40.         postCreate: function(){  
41.             dojox.sam.Dialog.superclass.postCreate.apply(this, arguments);  
42.               
43.             //SAM: Display resizeHandle or not  
44.             if(!this.resizable){  
45.               this.resizeHandle.style.display = "none";       
46.           }  
47.         },  
48.         //SAM:override super's method, enable resize handle.  
49.         startup: function(){      
50.             dojox.sam.Dialog.superclass.startup.call(this);   
51.               
52.             if (this.resizable) {  
53.                 this.containerNode.style.overflow = "auto";  
54.                 var tmp = new dojox.layout.ResizeHandle({   
55.                     //targetContainer: this.containerNode,   
56.                     targetId: this.id,   
57.                     resizeAxis: this.resizeAxis   
58.                 },this.resizeHandle);  
59.             }  
60.     }  
61. });  
62. }  

这个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