MyCellRenderer class
To change the DataGrid row and header settings we need to override the default settings, which are defined in the CellRenderer and HeaderRenderer classes. So we create new classes, which extend the CellRenderer and HeaderRenderer classes. In the following I will focus only on the CellRenderer class. It is very similar for the HeaderRenderer class.
We first need to import the CellRenderer class, since our new class extends the CellRenderer class.
package biz.Flashscript.cellrenderer
{
import fl.controls.listClasses.CellRenderer;
/*
/ The class extends the CellRenderer class and inherits all the
/ properties from this class.
*/
public class MyCellRenderer extends CellRenderer
{
Then we declare a static variable for an array, which we need later. Also we add super(); to indicate that this is a subclass.
/*
/ We declare a static Array variable to get hold which rows have been
/ selected.
*/
private static var _myArray:Array=new Array;
public function MyCellRenderer ():void
{
super ();
}
The next function is a public function, which is called from the main movie. It will record which link in the List or DataGrid was pressed and add the number to the array.
/*
/ This function will add the row index number to the array.
*/
public static function selectIndex (sid:int):void
{
_myArray.push (sid);
}
The next function will set the different skins. In our case we want to change the skins when we have selected an item. Since this function exists in the superclass we need to override it. We then create a for loop where we use the array, which contains the numbers for the selected rows. Each row has an index number which we call with _listData.index. We then change the style of the skins in the particular rows, which already had been selected. Finally we execute the method drawBackground.
/* * This method overrides the inherited drawBackground() method and adds the GreyColor from * the MovieClip GreyColor to each selected index. */ override protected function drawBackground ():void { for (var count:int=0; count<=_myArray.length; count++) { /* / _listdata.index is the index for each row. */ if (_listData.index == _myArray[count]) { /* / We select the style after the row was pressed. */ setStyle ("selectedUpSkin",GreyColor); setStyle ("upSkin", GreyColor); } super.drawBackground (); } }
We also want to be able to control the textfield in each row. To do this we need to change the properties of the textField object, which is the name for textfield in each row. Then we need to override another method of the CellRenderer class. To allow html tags to that textField we set it equal to this.label. The label is the variable for the visible text in the components.
/*
/ This is another class of the CellRenderer class, which we need
/ to override to set new properties. We change the textField properties.
/ The textField is derived from the LabelButton, which is used for the
/ DataGrid and List components rows and headers. We set wordWrap to true if the
/ text is very long and give html properties to the textField. The string
/ for the textField has the name 'label'.
*/
override protected function drawLayout ():void
{
textField.wordWrap = true;
textField.autoSize = "left";
textField.width = this.width;
textField.htmlText=this.label;
super.drawLayout ();
}
}
}
Now that we have this class, we can write the script for the main movie.