Extended combobox

[rebelheart]

Hi ,

I am trying to make a component that is a combobox with two scrollers on either sides to scroll through the dataprovider. I chose to extend the combobox and add the scrollers as I wanted to retain the functionality of a combobox. The component does show wierd behaviour when resizing the window.

The problem is that in the code for the component, I am adding the scrollers with the following statement.

this.parent.addchild(scroller) so the application seems to consider the extend combobox and the two scrollers as three children instead of just one child component, for obvious reasons.

If I add the scrollers to the extended combobbox itself with a addchild(scroller) statement, they scroller are not getting aligned properly.

The extended combobox component class.

package controls
{
import mx.controls.ComboBox;
import mx.controls.Button;
import flash.events.Event;
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.collections.XMLListCollection;

/** This is a composite component extending the functionality of combobox
* by adding scrollers on either sides. The scrollers allow for scrolling
* the dataprovider of the combobox */


[Event(name='rightScrollClick',type='flash.events.M ouseEvent')]
[Event(name='leftScrollClick',type='flash.events.Mo useEvent')]

public class ScrollComboBox extends ComboBox
{

private var rightScroller:Button;
private var leftScroller:Button;

public static const rightLabel:String = '>';
public static const leftLabel:String = '<';


public function ScrollComboBox(){

super();
/* addEventListener(Event.ADDED_TO_STAGE,addToStageLi stener); */

//without this , the component splits into its constituent parts and
//aligns based on the layout of the parent container.
addEventListener(Event.RENDER,updateComponent);
}

private function addToStageListener(e:Event):void{

stage.addEventListener(Event.RESIZE,updateComponen t);
}

private function updateComponent(e:Event):void{

updateDisplayList(this.unscaledWidth,this.unscaled Height);
}


/**Add the scrollers after checking if they exist.Also the scrollers
* are added to the parent of the combobox as children */

override protected function createChildren():void{

super.createChildren();

if(!rightScroller){

rightScroller = new Button;
rightScroller.label = rightLabel;

rightScroller.addEventListener(MouseEvent.CLICK,cl ickRightScroller);
this.parent.addChild(rightScroller);
//addChild(rightScroller);

}

if(!leftScroller){

leftScroller = new Button;
leftScroller.label = leftLabel;

leftScroller.addEventListener(MouseEvent.CLICK,cli ckLeftScroller);
this.parent.addChild(leftScroller);
//addChild(leftScroller);
}
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

super.updateDisplayList(unscaledWidth,unscaledHeig ht);

leftScroller.move(this.x-leftScroller.width,this.y);
rightScroller.move(this.x+this.width,this.y);

//this might have to be in creationcomplete handler so that this is called only when
//created and not everytime displaylist is updated since programatically you might
//want to move the component to negative x which the below logic wouldn't allow for.
if(leftScroller.x < 0){

var xShift:Number = Math.abs(leftScroller.x);

leftScroller.x += xShift;
this.x += xShift;
rightScroller.x += xShift;
}
}

/** Dispatch click events for the scrollers */

private function clickRightScroller(event:MouseEvent):void{

dispatchEvent(new MouseEvent("rightScrollClick"));

if((this.dataProvider is Array) || (this.dataProvider is ArrayCollection)
|| (this.dataProvider is XMLListCollection)){

if(this.dataProvider.length>=2 && this.selectedIndex<this.dataProvider.length){

this.selectedIndex += 1;
}
}
}

/** Dispatch click events for the scrollers */

private function clickLeftScroller(event:MouseEvent):void{

dispatchEvent(new MouseEvent("leftScrollClick"));

if((this.dataProvider is Array) || (this.dataProvider is ArrayCollection)
|| (this.dataProvider is XMLListCollection)){

if(this.dataProvider.length >=2 && this.selectedIndex>0){

this.selectedIndex -= 1;
}
}
}
}
}

The application file.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"
xmlns:combobox="skins.combobox.*" xmlns:controls="controls.*" height="100%" >

<mx:Script>
<![CDATA[
import mx.controls.Alert;

[Bindable]
private var xyz:Array;

public function init():void{

xyz =['First','Second'];

}


]]>
</mx:Script>

<controls:ScrollComboBox id="scb2" dataProvider="{xyz}" />

</mx:Application>


If the user tries to resize the window, the flaw can be seen quite clearly. Any ideas on how to overcome this are appreciated.

Thanks.