Use itemrenderer and headerrenderer extension in the DataGrid to perform operations

If you only want to simply display data, or perform some formatting operations on the displayed data, the basic DataGrid and labelfunction support can be satisfied, but most of us need to target different data and objects, perform different rendering, such as checkbox, drop-down selection box, and date. For example, you can control and display complex views, such as Gantt charts. In this case, itemrenderer and headerrenderer must be extended.
(1) idatarenderer and idropinlistitemrenderer interfaces are implemented for itemrenderer classes.
Many flex control classes implement idatarenderer interfaces by default, such as buttons, iner, and textarea. Many flex control classes also implement the idropinlistitemrenderer interface, but unfortunately the container is not implemented by default. What I do requires plotting. Therefore, to use the canvas extension directly, you must implement the idropinlistitemrenderer interface to obtain the listdata object. CopyCode The Code is as follows: 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;
}

unfortunately, I didn't know it at the beginning, so it took a long time to find out how to obtain the current column index.
in this way, I can obtain the datagridcolumn object in the setdata method, as follows (the advanceddatagrid object is used): copy Code the code is as follows: var DG: advanceddatagrid = This. owner as advanceddatagrid;
// listdata is obtained by implementing the idropinlistitemrenderer interface.
var gdgc: ganttadvanceddatagridcolumn =
DG. columns [listdata. columnindex] As ganttadvanceddatagridcolumn;
var DG: advanceddatagrid = This. owner as advanceddatagrid;
// listdata is obtained by implementing the idropinlistitemrenderer interface.
var gdgc: ganttadvanceddatagridcolumn =
DG. columns [listdata. columnindex] As ganttadvanceddatagridcolumn;

(2) Extend the datagridcolumn object to add attributes and pass parameters.
some attributes need to be dynamically transmitted from outside, but some attributes do not belong to list data. The grid header needs to use the data for some rendering operations. In this case, you need to extend the implementation of the datagridcolumn object and obtain the datagridcolumn object in the headerrenderer object to obtain the parameters.
the following is an extended advancedatagridcolumn. In this extension, the startdate and lastdate attributes are added. copy Code the code is as follows:

in this way, you can set this column externally during application initialization: copy Code the code is as follows: ganttcolumn. startdate = new date (starttime);
ganttcolumn. lastdate = new date (lasttime);
ganttcolumn. startdate = new date (starttime);
ganttcolumn. lastdate = new date (lasttime);

In headerrenderer, you can obtain the corresponding object and parameter copy Code the code is as follows: 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 ();
}< BR >}< br> 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 ();
}< BR >}

(3) Use labelfunction to format the displayed data.
for example, if you want to format the date data, see copy Code the code is as follows: 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);
}< br> 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);
}

in the column of the MX, You can reference this label function copy Code the code is as follows: