论坛首页 → Web前端技术论坛 →

扩展Dojo 0.9之Resizable Dialog

浏览 4881 次
锁定老帖子 主题：扩展Dojo 0.9之Resizable Dialog
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • cats_tiger
  • 等级: 三星会员
  • 性别:
  • 文章: 248
  • 积分: 399
  • 来自: 北京
   发表时间：2007-08-24  
虽然对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
返回顶楼
         
  • wangjj_0016
  • 等级: 初级会员
  • 文章: 3
  • 积分: 30
  • 来自: ...
   发表时间：2007-08-28  
大哥，你的代码有问题啊
返回顶楼
          回帖地址
0 请登录后投票
  • cats_tiger
  • 等级: 三星会员
  • 性别:
  • 文章: 248
  • 积分: 399
  • 来自: 北京
   发表时间：2007-08-29  
啥米问题？说清楚嘛。
返回顶楼
          回帖地址
0 请登录后投票
  • ado88
  • 等级: 初级会员
  • 性别:
  • 文章: 19
  • 积分: 60
  • 来自: 北京
   发表时间：2007-09-15  
wangjj_0016:

我试验了一下没有问题,你一定是把路径搞错了,.要放到dojox文件夹下面
返回顶楼
          回帖地址
0 请登录后投票
  • hmjlq
  • 等级: 初级会员
  • 文章: 9
  • 积分: 42
  • 来自: ...
   发表时间：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不能调整大小
返回顶楼
          回帖地址
0 请登录后投票
  • 鹤惊昆仑
  • 等级: 一星会员
  • 性别:
  • 文章: 98
  • 积分: 160
  • 来自: 北京
   发表时间：2008-01-19  
楼主的扩展在0.9版本可以正常使用。但在1.0.0版本无法正常使用。我做了一点微小的修正，使之可以在1.0.0版本下自由伸缩（见附件）。感谢cats_tiger！
返回顶楼
          回帖地址
0 请登录后投票
  • mybird
  • 等级: 初级会员
  • 性别:
  • 文章: 2
  • 积分: 30
  • 来自: 苏州
   发表时间：2008-07-14  
在1.1.1下无法运行
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics