chrispix
02-08-2005, 11:45 PM
I've created a custom component to be displayed in a list using the CellRenderer API. The list initially looks fine, but as soon as I roll over any item, or scroll the list (basically anything that causes the list to redraw), it shrinks the components vertically when redrawing them. It doesn't shrink the row height, just the visual display of the component and its contents. Has anyone had this problem?
See attachments for screenshots.
Here's my class:
import mx.core.UIComponent;
import mx.controls.Label;
import mx.utils.*;
class com.classroom.subscription.OrganizationListItem extends UIComponent {
static var symbolName:String = "OrganizationListItem";
static var symbolOwner:Object = Object(com.classroom.subscription.OrganizationList Item);
var className:String = "OrganizationListItem";
var listOwner; // the List/grid/tree that contains this cell
var getCellIndex:Function; // returns the index of the current cell
var getDataLabel:Function; // returns a string containing the column name for the current cell in a data grid
private var boundingBox_mc;
private var __id:String;
private var __organizationName:String;
private var __organizationAddress:String;
private var __isDistrict:Boolean;
private var __smallFontStyle = {
fontSize : 12
,borderStyle : "none"
};
private var __smallerFontStyle = {
fontSize : 9
,borderStyle : "none"
};
public function OrganizationListItem() {}
public function init():Void {
trace('init called');
super.init();
this.boundingBox_mc.width = 0;
this.boundingBox_mc.height = 0;
this.boundingBox_mc.visible = false;
createChildren();
}
public function createChildren():Void {
trace('createChildren called');
if (this["nameLabel"] == undefined) {
// add name
createClassObject(Label, "nameLabel", this.getNextHighestDepth(), {text: ""});
applyStyles(this["nameLabel"],__smallFontStyle);
this["nameLabel"].setSize(200, 20);
this["nameLabel"].move(21, 2);
}
if (this["typeLabel"] == undefined) {
// add type
createClassObject(Label, "typeLabel", this.getNextHighestDepth(), {text: ""});
applyStyles(this["typeLabel"],__smallerFontStyle);
this["typeLabel"].setSize(50, 20);
this["typeLabel"].move(220, 6);
}
if (this["addressLabel"] == undefined) {
// add address
createClassObject(Label, "addressLabel", this.getNextHighestDepth(), {text: ""});
applyStyles(this["addressLabel"],__smallerFontStyle);
this["addressLabel"].setSize(250, 20);
this["addressLabel"].move(21, 20);
}
size();
invalidate();
}
public function size():Void {
super.size();
trace('setting height to ' + height + ' for ' + this.id);
this._width = width;
this._height = height;
//this._width = 280;
//this._height = 40;
invalidate();
}
public function draw():Void {
super.draw();
trace('drawing');
if (this.name != undefined) {
this["nameLabel"].text = this.name;
}
if (this.address != undefined) {
this["addressLabel"].text = this.address;
}
if (this.id != undefined) {
// create school/district icon
destroyObject(this["icon"]);
if (this.isDistrict) {
attachMovie("district", "icon", this.getNextHighestDepth(), {_x:3, _y:3});
this["typeLabel"].text = "District";
}
else {
attachMovie("school", "icon", this.getNextHighestDepth(), {_x:3, _y:3});
this["typeLabel"].text = "School";
}
}
}
// clear the fields and hide the icon to reset object
public function reset() {
this["nameLabel"].text = "";
this["addressLabel"].text = "";
this["typeLabel"].text = "";
destroyObject(this["icon"]);
}
// Getter/Setters
public function get name():String {
return __organizationName;
}
public function set name(newName:String) {
//trace('OrganizationListItem: setting name to ' + newName);
__organizationName = newName;
//nameLabel.text = __organizationName;
invalidate();
}
public function get address():String {
return __organizationAddress;
}
public function set address(newAddress:String) {
//trace('OrganizationListItem: setting address to ' + newAddress);
__organizationAddress = newAddress;
invalidate();
}
public function get id():String {
return __id;
}
public function set id(newId:String) {
__id = newId;
invalidate();
}
public function get isDistrict():Boolean {
return __isDistrict;
}
public function set isDistrict(newValue:Boolean) {
__isDistrict = newValue;
invalidate();
}
private function applyStyles(item:Object, styles:Object) {
for (var style in styles) {
item.setStyle(style,styles[style]);
}
}
// CellRenderer API methods
function setValue(suggested:String, item:Object, selected:Boolean):Void {
//trace('setValue called with ' + item.id);
// clear contents on undefined
if (item == undefined) {
reset();
}
if (item.id != this.id) {
//trace('initializing fields');
this.id = item.id;
this.name = item.name;
this.address = item.address;
this.isDistrict = item.isDistrict;
}
}
// The height at which this class wants the surrounding cell rendered
// This can only be equal to or smaller than the List's rowHeight value
function getPreferredHeight():Number {
trace('getPreferredHeight called');
return 40;
}
}
See attachments for screenshots.
Here's my class:
import mx.core.UIComponent;
import mx.controls.Label;
import mx.utils.*;
class com.classroom.subscription.OrganizationListItem extends UIComponent {
static var symbolName:String = "OrganizationListItem";
static var symbolOwner:Object = Object(com.classroom.subscription.OrganizationList Item);
var className:String = "OrganizationListItem";
var listOwner; // the List/grid/tree that contains this cell
var getCellIndex:Function; // returns the index of the current cell
var getDataLabel:Function; // returns a string containing the column name for the current cell in a data grid
private var boundingBox_mc;
private var __id:String;
private var __organizationName:String;
private var __organizationAddress:String;
private var __isDistrict:Boolean;
private var __smallFontStyle = {
fontSize : 12
,borderStyle : "none"
};
private var __smallerFontStyle = {
fontSize : 9
,borderStyle : "none"
};
public function OrganizationListItem() {}
public function init():Void {
trace('init called');
super.init();
this.boundingBox_mc.width = 0;
this.boundingBox_mc.height = 0;
this.boundingBox_mc.visible = false;
createChildren();
}
public function createChildren():Void {
trace('createChildren called');
if (this["nameLabel"] == undefined) {
// add name
createClassObject(Label, "nameLabel", this.getNextHighestDepth(), {text: ""});
applyStyles(this["nameLabel"],__smallFontStyle);
this["nameLabel"].setSize(200, 20);
this["nameLabel"].move(21, 2);
}
if (this["typeLabel"] == undefined) {
// add type
createClassObject(Label, "typeLabel", this.getNextHighestDepth(), {text: ""});
applyStyles(this["typeLabel"],__smallerFontStyle);
this["typeLabel"].setSize(50, 20);
this["typeLabel"].move(220, 6);
}
if (this["addressLabel"] == undefined) {
// add address
createClassObject(Label, "addressLabel", this.getNextHighestDepth(), {text: ""});
applyStyles(this["addressLabel"],__smallerFontStyle);
this["addressLabel"].setSize(250, 20);
this["addressLabel"].move(21, 20);
}
size();
invalidate();
}
public function size():Void {
super.size();
trace('setting height to ' + height + ' for ' + this.id);
this._width = width;
this._height = height;
//this._width = 280;
//this._height = 40;
invalidate();
}
public function draw():Void {
super.draw();
trace('drawing');
if (this.name != undefined) {
this["nameLabel"].text = this.name;
}
if (this.address != undefined) {
this["addressLabel"].text = this.address;
}
if (this.id != undefined) {
// create school/district icon
destroyObject(this["icon"]);
if (this.isDistrict) {
attachMovie("district", "icon", this.getNextHighestDepth(), {_x:3, _y:3});
this["typeLabel"].text = "District";
}
else {
attachMovie("school", "icon", this.getNextHighestDepth(), {_x:3, _y:3});
this["typeLabel"].text = "School";
}
}
}
// clear the fields and hide the icon to reset object
public function reset() {
this["nameLabel"].text = "";
this["addressLabel"].text = "";
this["typeLabel"].text = "";
destroyObject(this["icon"]);
}
// Getter/Setters
public function get name():String {
return __organizationName;
}
public function set name(newName:String) {
//trace('OrganizationListItem: setting name to ' + newName);
__organizationName = newName;
//nameLabel.text = __organizationName;
invalidate();
}
public function get address():String {
return __organizationAddress;
}
public function set address(newAddress:String) {
//trace('OrganizationListItem: setting address to ' + newAddress);
__organizationAddress = newAddress;
invalidate();
}
public function get id():String {
return __id;
}
public function set id(newId:String) {
__id = newId;
invalidate();
}
public function get isDistrict():Boolean {
return __isDistrict;
}
public function set isDistrict(newValue:Boolean) {
__isDistrict = newValue;
invalidate();
}
private function applyStyles(item:Object, styles:Object) {
for (var style in styles) {
item.setStyle(style,styles[style]);
}
}
// CellRenderer API methods
function setValue(suggested:String, item:Object, selected:Boolean):Void {
//trace('setValue called with ' + item.id);
// clear contents on undefined
if (item == undefined) {
reset();
}
if (item.id != this.id) {
//trace('initializing fields');
this.id = item.id;
this.name = item.name;
this.address = item.address;
this.isDistrict = item.isDistrict;
}
}
// The height at which this class wants the surrounding cell rendered
// This can only be equal to or smaller than the List's rowHeight value
function getPreferredHeight():Number {
trace('getPreferredHeight called');
return 40;
}
}