backendcolumnlist.mxml

flex 实现的一个showcase 喜欢flex的朋友可以

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	
	width="400"
	height="400"
	
	backgroundAlpha="0"
	backgroundColor="0x990000"
	
	horizontalScrollPolicy="off"
	verticalCenter="off">
	
	
	<mx:Script>
		<![CDATA[
		
		
			//////////////////////////////////////////////////
			//imports
			
			import com.flexShowcase.data.Tag;
			
			import mx.controls.*;
			import mx.events.CollectionEvent;
			import mx.collections.ArrayCollection;
			
			//////////////////////////////////////////////////
			//public variables
			
			[Bindable] public var listData:ArrayCollection;
			
			public var columnLength:uint = 10;
			public var numColumns:uint = 3;
			
			//////////////////////////////////////////////////
			//private variables
			
			[Bindable] private var dp0:ArrayCollection;
			
			private var allCheckboxes:ArrayCollection = new ArrayCollection();
			private var allCheckboxIndexes:ArrayCollection = new ArrayCollection();
			
			
			//////////////////////////////////////////////////
			//initialization
			
			public function handleCreationComplete(event:Event):void {
				if (!allCheckboxIndexes.contains(event.target.data)) {
					allCheckboxIndexes.addItem(event.target.data);
					allCheckboxes.addItem(event.target);
				}	
			}
			
			
			//////////////////////////////////////////////////
			//public functions
			
			public function timesToRepeat(col:uint, listLen:uint):uint{
				var colMinLen:uint = columnLength; //from global
				var cols:uint = numColumns;  // from global
				var repeat:uint=0;
				if (listLen <= (cols * colMinLen)){
					repeat = colMinLen;
				}else{
					repeat =  Math.ceil((listLen - (cols * colMinLen)) / cols) + colMinLen;
				}
				return repeat;
			}
			public function dp_startingIndex(col:uint, listLen:uint):uint{
				var sIndex:uint=0;
				var colMinLen:uint = columnLength; // from global
				var cols:uint = numColumns; // from global
				if (listLen < cols * colMinLen){
					sIndex = (col * colMinLen) - colMinLen;
				}
				else {
					colMinLen = Math.ceil((listLen - (cols * colMinLen)) / cols) + colMinLen;
					sIndex = (col * colMinLen) - colMinLen;
				}
				return sIndex;
			}
			
			public function checkBoxMatchingID(id:uint):void {
				if (allCheckboxIndexes.length > 0) {
					var checkBox:CheckBox = allCheckboxes[allCheckboxIndexes.getItemIndex(id)]
					if (checkBox != null) {
						checkBox.selected = true;
					}
				}
			}
			public function getAllCheckedBoxIndexes():Array {
				var tempArray:Array = new Array();
				for (var i:uint = 0; i < allCheckboxes.length; ++i) {
					var checkbox:CheckBox = allCheckboxes[i];
					if (checkbox.selected == true) {
						tempArray.push(allCheckboxIndexes[i]);
					}
				}
				return tempArray;
			}
			public function resetAllCheckBoxes():void {
				var checkBox:CheckBox;
				for (var i:uint=0; i<allCheckboxes.length; i++){
					checkBox = allCheckboxes[i];
					checkBox.selected = false;
				}
			}
			
			
			//////////////////////////////////////////////////
			//handler functions
			
			private function checkBoxClickHandler(event:MouseEvent):void {
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:HBox >
		<mx:Box backgroundColor="0x000099" backgroundAlpha="0"  verticalGap="-5" width="250" height="260">
			<mx:Repeater id="checkBoxRepeater0" dataProvider="{listData}" startingIndex="{dp_startingIndex(1,listData.length)}" count="{timesToRepeat(1, listData.length)}">
				<mx:CheckBox data="{checkBoxRepeater0.currentItem.id}" buttonMode="true"
					label="{checkBoxRepeater0.currentItem.name}" click="checkBoxClickHandler(event);" 
					styleName="backendColumnListCheckBox" creationComplete="handleCreationComplete(event)"/>		
			</mx:Repeater>
		</mx:Box>
		
		<mx:Box backgroundColor="0x009900" backgroundAlpha="0" verticalGap="-5" width="150" height="260">
			<mx:Repeater id="checkBoxRepeater1" dataProvider="{listData}" startingIndex="{dp_startingIndex(2,listData.length)}"  count="{timesToRepeat(2, listData.length)}">
				<mx:CheckBox data="{checkBoxRepeater1.currentItem.id}" 
					label="{checkBoxRepeater1.currentItem.name}" buttonMode="true"
					click="checkBoxClickHandler(event);" styleName="backendColumnListCheckBox" 
					creationComplete="handleCreationComplete(event)"/>		
			</mx:Repeater>
		</mx:Box>
		<mx:Box backgroundColor="0x990000" backgroundAlpha="0"  verticalGap="-5" height="260">
			<mx:Repeater id="checkBoxRepeater2" dataProvider="{listData}"  startingIndex="{dp_startingIndex(3,listData.length)}"  count="{timesToRepeat(3, listData.length)}">
				<mx:CheckBox data="{checkBoxRepeater2.currentItem.id}" buttonMode="true"
					label="{checkBoxRepeater2.currentItem.name}" click="checkBoxClickHandler(event);" 
					styleName="backendColumnListCheckBox" creationComplete="handleCreationComplete(event)"/>		
			</mx:Repeater>
		</mx:Box>
	</mx:HBox>
	
	
</mx:Canvas>