BlogJava-果酱-文章分类-DOJO

关于DOJO中图片插件的注意事项

七孑 — Fri, 10 Aug 2012 04:02:00 GMT

其实在DOJO官方的例子中写的比较详细了，

dojox.image.ThumbnailPicker，

dojox.image.Lightbox两个插件结合用确实也很不错，不过还是有些细节问题值得注意。
1.把单击弹出改成双击弹出，这样单击可以作为选中该图片，进行删除，下载等后续操作。关键代码是 dojo.subscribe(dijit.byId('thumbPicker').getClickTopicName(), ondblclick); 函数不是直接的显示的lightbox函数，而是用一个间接的函数去绑定双击事件，触发lightbox函数。
2.样式的问题，hover在IE下没用，并且官方的select也是没有效果，所以应该手动去添加。
3.左右按钮，官方的例子样式写的不对（真不知道他们为什么不该），应该是background: transparent url("image/imageULbutton.png") no-repeat;

关键点1,2的代码：

function ondblclick(packet)

{

imageId = packet.data.id;

dojo.query(".imageGalleryThumbSelected").removeClass("imageGalleryThumbSelected");

dojo.addClass("img_thumbPicker_"+packet.index,"imageGalleryThumbSelected");

dojo.connect(dijit.byId('thumbPicker'),"onDblClick",function(){

if(packet!=null){

lightbox.show({

href: packet.largeUrl,

title: packet.title

});}

packet=null;

});

}

七孑 2012-08-10 12:02 发表评论

关于lazyTreeGrid增加checkbox

七孑 — Thu, 19 Jul 2012 07:22:00 GMT

没有太好的办法，只能用formatter属性来做。下面是我写的一个完整的实现方法
1 function( value,rowIndex,cells)

2 {    var rowdata = this.grid.getItem(rowIndex);
3     var rowvalue = rowdata.checked.toString();
4     var first = "
5     var last =  "onclick='OnChangeCheck("+rowIndex+","+this.grid.id+")'>

"+value;
6     if(rowvalue=='true'){
7         return first+" class='sd-icon-checked' onmouseover ='oncheckover(this)' onmouseout='oncheckout(this)'"+last;
8     }else if(rowvalue=='mix'){
9         return first+" class='sd-icon-checkmix' onmouseover ='oncheckmixover(this)' onmouseout='oncheckmixout(this)'"+last;
10     }
11         return first+"class='sd-icon-nochecked' onmouseover ='onnocheckover(this)' onmouseout='onnocheckout(this)'"+last;
12
13
14 };
15 function oncheckmixout(e) {
16     e.className = "sd-icon-checkmix";
17  }
18 function oncheckmixover(e) {
19     e.className = "sd-icon-overcheckmix";
20  }
21 function onnocheckout(e) {
22     e.className = "sd-icon-nochecked";
23  }
24 function oncheckout(e) {
25     e.className = "sd-icon-checked";
26  }
27 function onnocheckover(e) {
28         e.className = "sd-icon-overnochecked";
29      }
30 function oncheckover(e) {
31     e.className = "sd-icon-overchecked";
32  }
33 function OnChangeCheck(rowIndexs,id)
34 {
35     var store=dijit.byId(id).store;
36     var rowdata = dijit.byId(id.toString()).getItem(rowIndexs);
37
38
39     if(rowdata.checked=='true'){
40         store.setValue(rowdata,"checked",'false');
41         if(rowdata.children!=null){
42             findChildrenItem(rowdata,'false',id);
43         }
44     }
45     else{
46         store.setValue(rowdata,"checked",'true');
47         if(rowdata.children!=null){
48             findChildrenItem(rowdata,'true',id);
49         }
50     }
51     var parentItem= getTreeParentItem(id,rowdata);
52     if(parentItem!=null){
53         findParentItem(parentItem,id);
54     }
55
56 }
57
58 function findChildrenItem(thisItem,value,id){
59     var store=dijit.byId(id).store;
60      for(var k=0;k
61
62          var theChildren = thisItem.children[k];
63          store.setValue(theChildren,"checked",value);
64          if(theChildren.children!=null){
65              findChildrenItem(theChildren,value,id);
66          }
67
68     }
69
70 }
71 function findParentItem(parentItem,id){
72     var store=dijit.byId(id).store;
73     var parentChecked = 0;
74     if(parentItem!=null){
75          var children = parentItem.children;
76          for(var i=0;i
77          {
78              if(children[i].checked.toString()!='true'){
79                  if(children[i].checked.toString()=='mix'){parentChecked +=0.5;}
80                  else{parentChecked +=1;};
81              }
82          }
83          if(!parentChecked)
84          {
85              store.setValue(parentItem,"checked",'true');
86          }else{
87              if(parentChecked!=parentItem.children.length||parentChecked!=parseInt(parentChecked)){
88                  store.setValue(parentItem,"checked",'mix');
89                  }
90              else{
91                  store.setValue(parentItem,"checked",'false');
92                  };
93          }
94     }
95     var superParent=   PM.addCheckbox = function( value,rowIndex,cells)

{ var rowdata = this.grid.getItem(rowIndex);

var rowvalue = rowdata.checked.toString();

var first = "

var last = "onclick='OnChangeCheck("+rowIndex+","+this.grid.id+")'>

"+value;

if(rowvalue=='true'){

return first+" class='sd-icon-checked' onmouseover ='oncheckover(this)' onmouseout='oncheckout(this)'"+last;

}else if(rowvalue=='mix'){

return first+" class='sd-icon-checkmix' onmouseover ='oncheckmixover(this)' onmouseout='oncheckmixout(this)'"+last;

}

return first+"class='sd-icon-nochecked' onmouseover ='onnocheckover(this)' onmouseout='onnocheckout(this)'"+last;

};

function oncheckmixout(e) {

e.className = "sd-icon-checkmix";

}

function oncheckmixover(e) {

e.className = "sd-icon-overcheckmix";

}

function onnocheckout(e) {

e.className = "sd-icon-nochecked";

}

function oncheckout(e) {

e.className = "sd-icon-checked";

}

function onnocheckover(e) {

e.className = "sd-icon-overnochecked";

}

function oncheckover(e) {

e.className = "sd-icon-overchecked";

}

function OnChangeCheck(rowIndexs,id)

{

var store=dijit.byId(id).store;

var rowdata = dijit.byId(id.toString()).getItem(rowIndexs);

if(rowdata.checked=='true'){

store.setValue(rowdata,"checked",'false');

if(rowdata.children!=null){

findChildrenItem(rowdata,'false',id);

}

else{

store.setValue(rowdata,"checked",'true');

if(rowdata.children!=null){

findChildrenItem(rowdata,'true',id);

}

var parentItem= getTreeParentItem(id,rowdata);

if(parentItem!=null){

findParentItem(parentItem,id);

}

function findChildrenItem(thisItem,value,id){

var store=dijit.byId(id).store;

for(var k=0;k

var theChildren = thisItem.children[k];

store.setValue(theChildren,"checked",value);

if(theChildren.children!=null){

findChildrenItem(theChildren,value,id);

}

function findParentItem(parentItem,id){

var store=dijit.byId(id).store;

var parentChecked = 0;

if(parentItem!=null){

var children = parentItem.children;

for(var i=0;i

{

if(children[i].checked.toString()!='true'){

if(children[i].checked.toString()=='mix'){parentChecked +=0.5;}

else{parentChecked +=1;};

}

if(!parentChecked)

{

store.setValue(parentItem,"checked",'true');

}else{

if(parentChecked!=parentItem.children.length||parentChecked!=parseInt(parentChecked)){

store.setValue(parentItem,"checked",'mix');

}

else{

store.setValue(parentItem,"checked",'false');

};

}

var superParent= getTreeParentItem(id,parentItem);

if(superParent!=null){

findParentItem(superParent,id);

}

}(id,parentItem);
96     if(superParent!=null){
97         findParentItem(superParent,id);
98     }
99 }

写的可能比较繁琐，没有优化，是用图片控制的，因为formatter函数中不能使用dojo 的组件，这有点遗憾。图片在dojo包的\dojox\form\resources\images中，自己找一下。getTreeParentItem是公司封装的方法，查找父节点，这里就不贴了，网上找一找就行，希望对有这类任务的人有帮助

七孑 2012-07-19 15:22 发表评论

关于DOJO中dialog遮罩的问题

七孑 — Thu, 14 Jun 2012 07:16:00 GMT

很久没写东西了，以前发表的文章也大多都是转载的，前段时间看到一篇文章，说开发人员为什么不喜欢写技术博客，感觉挺有感触的，大多数原因是解决了就该忙其他的事情了，不去管这些东西了，还有就是怕不够深入，写的不对，让人笑话。
最近几天接到任务要解决一个DOJO中dialog的BUG，感觉弄了好几天很烦躁，也许是我技术比较烂，高手应该很容易解决，但是我希望能记录下来，能给同样碰到问题的人一些帮助，这样码的那么多字就不算白费。
dialog是自带遮罩功能的，但是我们在使用的时候，有可能不需要遮罩这个东西，怎么把它去掉呢？如果使用的是dojox的dialog，modal属性直接可以去掉遮罩，但是DOJO1.7以后推荐使用DialogSimple，因为它继承了ContentPane。但是却没有了modal属性，怎么办？有几种办法：
1. dojo.byId("id").childNodes[0].style.display="none"; id是在页面上遮罩的id，可以都过firebug看到
2.dojo.destroy('id'); id是你生成dialog的id
3.dijit._underlay.hide();
4.dijit._underlay.domNode.style.display = "none";
第一种肯定不是最好的办法，因为id这个东西不是固定的，并且很有可能是系统自动生成的。第二种会出现新的问题，因为当你页面中存在很多个dialog时，他们都是共用一个遮罩的，这样其他的dialog如果还想使用遮罩就是不可能的了。第三种是我在网上看到的办法，但是很遗憾，会报错，原因找到了，是因为hide的时候有这一句this.bgIframe.destroy()，但是你关闭dialog时调用的hide方法又会销毁一次bgIframe，会显示找不到bgIframe。所以我进入了DialogUnderlay中的hide方法，发现主要的代码就是第四种方法！如果想要显示就使用dijit._underlay.domNode.style.display = "block"，是不是完美解决了？

七孑 2012-06-14 15:16 发表评论