Handling events within custom components

Dec:use ArrayCollection as dataPrivider,due to it can update by refresh(),instead of Array(),

Event:when you select a value on Combox,the width of Combox is changed

below is Code for it

---com.flexsolutions.chapter2.as Page---

package com.flexsolutions.chapter2

{

	import flash.events.Event;

	

	import mx.collections.ArrayCollection;

	import mx.collections.Sort;

	import mx.collections.SortField;

	import mx.controls.ComboBox;



	public class Chapter_2_Sol_5 extends ComboBox

	{

		private var _myDP:ArrayCollection;

		public function Chapter_2_Sol_5()

		{

			super();

			this.addEventListener("creationComplete",resize);

		}

		public function set setMyDP(dataP:ArrayCollection):void{

		_myDP=dataP;

		_myDP.addItemAt("select a Value",0);

		this.dataProvider=_myDP;

		//var myClassesEvent:Event = new Event("changedDP");

		//dispatchEvent(myClassesEvent);

		}

		//[Bindable(event="changeDP")]

		public function get setMyDP():ArrayCollection{

		return _myDP;

		}

		public function resize(e:Event):void{

		addEventListener("focusIn",onFocusIn);

		this.width = 150;

		var sort=new Sort();

		sort.fields=[new SortField(null, true)];

		_myDP.sort=sort;

		_myDP.refresh();

		//super();

		}

		private function onFocusIn(e:Event):void{

			this.width=200;

		}

	}

}

---chapter2.xml Page---

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

	xmlns:comp = "com.flexsolutions.chapter2.*">

	<mx:Script>

		<![CDATA[

			import mx.collections.ArrayCollection;

			private var myAC:ArrayCollection=new ArrayCollection(["First Value", "Second Value","Third Value"]);

			

		]]>

	</mx:Script>

	<comp:Chapter_2_Sol_5 id="myCB" setMyDP="{myAC}"  x="115" y="47"/>

		<mx:Label text="The width of my custom Combo box is: {myCB.width}"  x="101" y="151"/>

</mx:Application>