使用DataGrid中扩展ItemRenderer和HeaderRenderer进行操作
336666小游戏,广州汽车限购令,十步射一人
如果仅仅只是简单的显示数据，或者对显示数据做一些格式化操作，基本的datagrid，加labelfunction支持就可以满足了，但大多我们需要针对不同的数据和对象，进行不同的渲染，比如checkbox啦，下拉选择框，日期等等，再比如自己控制显示复杂视图，比如gantt图之类。这就必须扩展itemrenderer和headerrenderer。
（1）有关itemrenderer的类实现idatarenderer和idropinlistitemrenderer接口。 很多flex control类都默认实现了idatarenderer接口，比如button、container、textarea等等。很多flex control类也实现了idropinlistitemrenderer接口，但可惜container没有默认实现。而我做的东西，需要绘图，所以直接利用canvas扩展，就必须自己实现idropinlistitemrenderer接口，来获取listdata对象。
private var _listdata:baselistdata;
// make the listdata property bindable.
[bindable("datachange")]
public function get listdata():baselistdata
{
return _listdata;
}
public function set listdata(value:baselistdata):void
{
_listdata = value;
}
private var _listdata:baselistdata;
// make the listdata property bindable.
[bindable("datachange")]
public function get listdata():baselistdata
{
return _listdata;
}
public function set listdata(value:baselistdata):void
{
_listdata = value;
}
可惜俺刚开始不知道之个，所以耗费了很长时间，花费在寻找如何获取当前column index问题上。
这样，我才可以在setdata方法中，获取到datagridcolumn对象，如下（我使用的是advanceddatagrid对象）：
var dg:advanceddatagrid = this.owner as advanceddatagrid;
//listdata就是实现idropinlistitemrenderer接口所可以获取的
var gdgc:ganttadvanceddatagridcolumn =
dg.columns[listdata.columnindex] as ganttadvanceddatagridcolumn;
var dg:advanceddatagrid = this.owner as advanceddatagrid;
//listdata就是实现idropinlistitemrenderer接口所可以获取的
var gdgc:ganttadvanceddatagridcolumn =
dg.columns[listdata.columnindex] as ganttadvanceddatagridcolumn;
（2）扩展datagridcolumn对象来增加属性，传递参数。
有些属性我需要动态从外面传递进来，但有不属于list data数据的部分。而grid header需要利用这些数据做一些渲染操作。这时候就需要扩展实现datagridcolumn对象，同时在headerrenderer对象中获取此datagridcolumn对象来获取参数。
如下是扩展的一个advancedatagridcolumn使用，在这个扩展中，增加了startdate和lastdate两个属性
<gantt:ganttadvanceddatagridcolumn id="ganttcolumn" headertext="gantt" itemrenderer="{ganttitemeditor}" headerrenderer="{ganttheadereditor}" minwidth="400"/>
<gantt:ganttadvanceddatagridcolumn id="ganttcolumn" headertext="gantt" itemrenderer="{ganttitemeditor}" headerrenderer="{ganttheadereditor}" minwidth="400"/>
这样，就可以在application初始化的时候，在外部对此column进行设置：
ganttcolumn.startdate = new date(starttime);
ganttcolumn.lastdate = new date(lasttime);
ganttcolumn.startdate = new date(starttime);
ganttcolumn.lastdate = new date(lasttime);
在headerrenderer中，在setdata方法中，可以获取相应的对象和参数
override public function set data(value:object):void{
super.data = value;
var advanceddatagridcolumn:ganttadvanceddatagridcolumn
= value as ganttadvanceddatagridcolumn;
if(advanceddatagridcolumn!=null){
if(advanceddatagridcolumn.startdate!=null){
startdate = advanceddatagridcolumn.startdate;
lastdate = advanceddatagridcolumn.lastdate;
render();
}
}
}
override public function set data(value:object):void{
super.data = value;
var advanceddatagridcolumn:ganttadvanceddatagridcolumn
= value as ganttadvanceddatagridcolumn;
if(advanceddatagridcolumn!=null){
if(advanceddatagridcolumn.startdate!=null){
startdate = advanceddatagridcolumn.startdate;
lastdate = advanceddatagridcolumn.lastdate;
render();
}
}
}
（3）利用labelfunction进行显示数据格式化
比如我想对日期数据进行格式化操作，如下所示：
private function date_labelfunc(item:object, column:advanceddatagridcolumn):string {
var dateformatter:dateformatter = new dateformatter();
dateformatter.formatstring = "yyyy-mm-dd hh:nn";
var td:date = new date( new number(item[column.datafield]) );
return dateformatter.format( td );
}
private function date_labelfunc(item:object, column:advanceddatagridcolumn):string {
var dateformatter:dateformatter = new dateformatter();
dateformatter.formatstring = "yyyy-mm-dd hh:nn";
var td:date = new date( new number(item[column.datafield]) );
return dateformatter.format( td );
}
在mx的datagridcolumn中，就可以引用这个label function
<mx:advanceddatagridcolumn headertext="starttime" datafield="starttime" labelfunction="date_labelfunc" width="120"/>
<mx:advanceddatagridcolumn headertext="starttime" datafield="starttime" labelfunction="date_labelfunc" width="120"/>
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
点击进行留言回复
我要评论
网友评论