Here was my original code of my CellRenderer
:
package
{
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
public class RightAlignCell extends CellRenderer implements ICellRenderer
{
private var tf:TextFormat;
public function RightAlignCell()
{
tf = new TextFormat();
tf.align = TextFormatAlign.RIGHT;
}
override protected function drawLayout():void
{
textField.setTextFormat(tf);
super.drawLayout();
}
}
}
However, changing the value of textField.x
had no effect. I figured this was because I was calling super.drawLayout()
at the end of my overridden version, which apparently changed the value back to the default. If I called it at the start, changing the x
worked (I'm using -50 here as a noticeable example):
override protected function drawLayout():void
{
super.drawLayout();
textField.setTextFormat(tf);
textField.x = -50;
}
However, if I tried to set the value to this.width - textField.width
, as Gio suggested should give the desired result, it only increased the x
by 5 pixels.
I discovered that the problem was, again, super.drawLayout()
. It appears that it was resizing the textField
's width to fit inside the column, which is why my calculation didn't work. I tried to remove it the function, but that was a big mess since it handled a lot of code necessary for the column to display properly. So instead, I figured to make the textField
resize itself automatically to its proper width, even when super.drawLayout()
resized it, using the autoSize
property:
override protected function drawLayout():void
{
super.drawLayout();
textField.setTextFormat(tf);
textField.autoSize = TextFieldAutoSize.LEFT;
textField.x = this.width - textField.width;
}
Now it worked, although with a few hitches. These were minimal though, and were fixed by moving the lines defining text format and autosize to the constructor of the CellRenderer
(which I realised I should have done in the first place anyway). In the end, my final, functional class was this:
package
{
import fl.controls.listClasses.CellRenderer;
import fl.controls.listClasses.ICellRenderer;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.text.TextFieldAutoSize;
public class RightAlignCell extends CellRenderer implements ICellRenderer
{
private var tf:TextFormat;
public function RightAlignCell()
{
tf = new TextFormat();
tf.align = TextFormatAlign.RIGHT;
textField.setTextFormat(tf);
textField.autoSize = TextFieldAutoSize.LEFT;
}
override protected function drawLayout():void
{
super.drawLayout();
textField.x = this.width - textField.width - 5;
}
}
}
The subtraction of 5 pixels to textField.x
is just a bit of positioning I did to make the text look better, instead of touching the border of the column.
Sorry for such a long post while the solution is simple, but I decided to explain it in-depth. Basically I just came up with the class above, which worked.