[AS3] Disabling a list component row/item

[delany]

Been searching around for what seems a rather essential thing - being able to disable a row/item in a list component. Have found an AS2 answer that may or may not work - but I'm looking for something in AS3.

Where I've got to:

I've created a new class that extends the CellRenderer class (and so implements ICellRenderer).

I've overridden the set listData method. In the new method, I check for the presence or lack of a data element (enabled, say) and can then set the style of that row accordingly.

What I can't work out how to do is stop that row from responding to rollover and mouseUp/Down events. Presumably I need to removeEventHandler from that row - but what is the event handler called for the CellRenderer class?

Anyone got any thoughts on how to achieve this - either by completing this method above or via some other route?

What would obviously help is some sort of more complete documentation on dealing with the components - but haven't seen anything beyond the adobe livedocs which are very far from complete as far as I can tell.

Thanks,

Alex

[delany]

After some more experimenting - here's the solution, I think. Might help some googlers ...

First create a new cellRenderer file - I've called the cell renderer mc_sw_cell, so it goes in the file mc_sw_cell.as.

Then enter the following code. This disables the row where it has a property of v_enabled == "false". It also grays out the row text - substitute your own text format if you want something different.

package {

import fl.controls.listClasses.CellRenderer;
import flash.text.TextFormat;

class mc_sw_cell extends CellRenderer {

private var tf:TextFormat = new TextFormat();

public function mc_sw_cell() {

}

override public function set data(newData:Object):void {
_data = newData;

tf.font = "ITC Officina Sans Book";
tf.size = 16;
tf.bold = false;
tf.color = 0x777777;
tf.leading = -4;
tf.align = "center";

var originalStyles:Object = CellRenderer.getStyleDefinition();

setStyle("upSkin", originalStyles.upSkin);
setStyle("downSkin",originalStyles.downSkin);
setStyle("overSkin",originalStyles.overSkin);
setStyle("selectedUpSkin",originalStyles.selectedUpSkin);
setStyle("selectedDownSkin",originalStyles.selectedDownSkin);
setStyle("selectedOverSkin",originalStyles.selectedOverSkin);

if (_data.v_enabled == "false") {
setStyle("textFormat", tf);
mouseEnabled = false;
}

}

}

}

Finally, set your list view's (here called aList) cellRenderer to your new one:

aList.setStyle('cellRenderer', mc_sw_cell);

And, for instance, add disabled rows with:

aList.addItem({label:v_label, data:v_id, v_enabled: "false"});

[PoMotion]

This is my first time here so I am not sure how to do this, bare with me!.
I am using a multiline - list component - xml file. I would like to have my cell be multiline instead of single line. I am a newbie with component. I am using AS2.

[aamenabar]

Thanks! this did help me... and I found it googling :D

[rondog]

You missed one thing and that was to define the class public. Took me a minute to figure it out, but after that, it worked like a charm. Nice work.

[rondog]

another thing I noticed. If you scroll through the list component and then scroll back up, the rows that were once enabled are now disabled. I made a minor change and got it to work. I've also called mine CellDisable rather than mc_sw_cell.

package
{
import fl.controls.listClasses.CellRenderer;
import flash.text.TextFormat;

public class CellDisable extends CellRenderer
{
private var tfDisable:TextFormat = new TextFormat();
private var tfEnable:TextFormat = new TextFormat();

public function CellDisable()
{

}

override public function set data(newData:Object):void
{
_data = newData;
tfDisable.font = "arial";
tfDisable.size = 12;
tfDisable.bold = false;
tfDisable.color = 0x777777;
tfDisable.align = "left";

tfEnable.font = "arial";
tfEnable.size = 12;
tfEnable.bold = false;
tfEnable.color = 0x000000;
tfEnable.align = "left";

var originalStyles:Object = CellRenderer.getStyleDefinition();

setStyle("upSkin", originalStyles.upSkin);
setStyle("downSkin",originalStyles.downSkin);
setStyle("overSkin",originalStyles.overSkin);
setStyle("selectedUpSkin",originalStyles.selectedUpSkin);
setStyle("selectedDownSkin",originalStyles.selectedDownSkin);
setStyle("selectedOverSkin",originalStyles.selectedOverSkin);

if (_data.enabled == false)
{
setStyle("textFormat", tfDisable);
mouseEnabled = false;
}
else
{
setStyle("textFormat", tfEnable);
mouseEnabled = true;
}
}
}
}


Oh I also use a boolean value rather than string value for true and false.