注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

在gridx的cell中显示控件  

2013-12-09 19:21:16|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
gridx中提供decorator方法可以在cell中加入CSS和HTML,但是有时候并不能满足我们需求,例如需要加入复杂的widgets在cell中。不过不用担心, gridx为我们提供了gridx/modules/CellWidget模块。
关于CellWidgets的原理,我就不多说了,大家可以参考文章末尾的资料,只强调一点:
CellWidget的目的是创建尽可能少的控件。方法是使用set('value',...)方法在row之间重用控件。

如何使用CellWidget?
基本用法
  • 引入gridx/modules/CellWidget模块。
  • 在structure中将属性widgetsInCell设置为true。(这样可以使用CellWidget的decorator方法
  • 书写decorator方法,注意该方法没有参数,返回你所需要的HTML。
  • 设置data-dojo-attach-point,为setCellValue方法的取得该cellWidget设置标示。
  • 注意CellWidget,将widget创建和设置Value分开的做法,达到节省内存,重用widget目的。

{id: "cellWidget", name:"cellWidget", field:"id", width: "200px", widgetsInCell: true,
decorator: function(){
return "<div data-dojo-type='dijit.ProgressBar' data-dojo-props='maximum: 1000' " +
"class='gridxHasGridCellValue' data-dojo-attach-point='progBar' style='width: 100%;'></div>";
},
setCellValue: function(gridData, storeData, cellWidget){
var data = gridData;
cellWidget.progBar.set('value', data);
// cellWidget.cell give you full access to everything you want.
var rowIndex = cellWidget.cell.row.index();
}

}

在gridx的cell中显示控件 - 星期五 - 星期五
高级用法 (为widget添加事件)
  • 书写方法getCellWidgetConnects注意写法,它返回一个事件处理数组,该方法的好处是它会帮你管理事件,防止重复注册事件。(Kit Dir列)

{id: "kitdir", name:"Kit Dir", field:"kitdir", width: "200px", widgetsInCell: true,
decorator: function() {
return "<button data-dojo-type='dijit.form.Button' data-dojo-attach-point='btn'></button>";
},
setCellValue: function(gridData, storeData, cellWidget){
cellWidget.btn.set('label', gridData);
/* if(cellWidget.btn._cnnt){
// Remove previously connected events to avoid memory leak.
cellWidget.btn._cnnt.remove();
}
cellWidget.btn._cnnt = dojo.connect(cellWidget.btn, 'onClick', function(e){
alert(gridData);
}); */
},
getCellWidgetConnects: function(cellWidget, cell){
// return an array of connection arguments
return [
[cellWidget.btn, 'onClick', function(e){
console.log(cell.data());
alert(cell.data());
}]
];
}

}

在gridx的cell中显示控件 - 星期五 - 星期五

  • 两个回调函数 initializeCellWidget和uninitializeCellWidget方法

initializeCellWidget: function(cellWidget, cell){
console.log("init cell widget");
},

uninitializeCellWidget: function(cellWidget, cell){
console.log("uninit Cell widget");
}

  • 用编程的方式去创建CellWidget,使用方法onCellWidgetCreated。 (Version列)

{id: "version", name:"Version", field:"version", width: "200px", widgetsInCell: true,
onCellWidgetCreated: function(cellWidget, column){
var btn = new Button({});
btn.placeAt(cellWidget.domNode, "only");
cellWidget.btn = btn;
},
setCellValue: function(gridData, storeData, cellWidget){
cellWidget.btn.set('label', gridData+"label");
}

}


在gridx的cell中显示控件 - 星期五 - 星期五
 
  • 创建自己的CellWidget,不使用dijit,使用普通的<a>标签。(Image Name列)

{id: "imagename", name:"Image Name", field:"imagename", width: "200px", widgetsInCell: true,
decorator: function(){
return "<a data-dojo-attach-point='a'></a>";
},
setCellValue: function(gridData, storeData, cellWidget){
cellWidget.a.innerHTML = gridData;
cellWidget.a.onclick = function(e){
alert(gridData);
return false;
};
}
}


在gridx的cell中显示控件 - 星期五 - 星期五
 
API
: gridx/modules/CellWidget.__ColumnDefinition
在gridx的cell中显示控件 - 星期五 - 星期五
 
资料:
http://blog.csdn.net/dojotoolkit/article/details/8840686
  评论这张
 
阅读(839)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017