Dynamically generated header Flex

Recommended for you: Get network issues from WhatsUp Gold. Not end users.
1, Design ideas
(1)Using the component DataGrid of a new,
(2)The indicator function in GridData, using another component to reference it,
(3)GridData component in the DGridHeader statement, and several header in itself in the data source,
(4)In the new application, refer to DGridHeader
2, Design source
(1)GridData.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx=" ; 
		   width="100%" height="100%" creationComplete="initCompleteHandler(event)">
	<mx:Style>
		.headStyle{
			font-size:14;
			font-weight:bold;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.events.FlexEvent;
			
			//Table  header data binding;
			private var _headerArray:ArrayCollection;
			
			//The header name
			private var _headerName:String;
			
            /*The initialization function*/
			protected function initCompleteHandler(event:FlexEvent):void
			{
				generateDataGridHead(_headerArray);
			}
			
			/*Create table  header function;*/
			private function generateDataGridHead(header:ArrayCollection):void
			{
				if(header != null && header.length >0)
				{
					var column:Array = dataGrid.columns;
					column.length = 0;
					var dataGridColumn:DataGridColumn;
					for each(var obj:Object in header)
					{
						dataGridColumn = new DataGridColumn();
						dataGridColumn.headerText = obj.headDesc;
						dataGridColumn.dataField = obj.headCode;
						dataGridColumn.width = 55;
						column.push(dataGridColumn);
					}
					dataGrid.columns = column;
					if(column.length > 8)
					{
						dataGrid.width = column.length*55;
						dataGrid.height = column.length*60;
					}else{
						dataGrid.width = 1290;
						dataGrid.height = 510;
					}
				}
			}
			
			/*The get method*/
			public function get headerArray():ArrayCollection
			{
				return _headerArray;
			}
			
			/*The set method*/
			public function set headerArray(value:ArrayCollection):void
			{
				_headerArray = value;
			}

			/*The get method*/
			public function get headerName():String
			{
				return _headerName;
			}
			
			/*The set method*/
			public function set headerName(value:String):void
			{
				_headerName = value;
			}
			
		]]>
	</mx:Script>
	
	<mx:VBox width="100%" height="100%">
		<mx:DataGrid id="dataGrid" width="100%" height="100%" headerStyleName="headStyle" 
					 headerColors="[0xD9D9D9,0xD9D9D9]" paddingBottom="10" paddingLeft="20"
					 paddingRight="10" paddingTop="10">
			
		</mx:DataGrid>
	</mx:VBox>
</mx:Canvas>
(2)DGridHeader.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx=" ; 
		   width="100%" height="100%" xmlns:grid="grid.*">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
		    [Bindable]
			//The teacher table  header data binding;
			private var teacherArray:ArrayCollection = new ArrayCollection([
				{headDesc:"The teacher's name",headCode:"teacherName"},
				{headDesc:"The teacher sex",headCode:"teacherSex"},
				{headDesc:"The age of Teachers",headCode:"teacherAge"},
				{headDesc:"Teachers work",headCode:"teacherNumber"},
				{headDesc:"The teacher address",headCode:"teacherAddress"}
			]);
			
			[Bindable]
			//Student  header data binding;
			private var studentArray:ArrayCollection = new ArrayCollection([
				{headDesc:"The name of the student",headCode:"studentName"},
				{headDesc:"The gender of the students",headCode:"studentSex"},
				{headDesc:"The age of the students",headCode:"studentAge"},
				{headDesc:"Student number",headCode:"studentNumber"},
				{headDesc:"Students address",headCode:"studentAddress"}
			]);
			
			[Bindable]
			//Table  header data binding;
			private var classArray:ArrayCollection = new ArrayCollection([
				{headDesc:"Course name",headCode:"className"},
				{headDesc:"Professor teachers",headCode:"teachTeacher"},
				{headDesc:"Class number",headCode:"number"}
			]);
		]]>
	</mx:Script>
	
	<mx:TabNavigator width="100%" height="100%" fontSize="14">
		<mx:Canvas label="Teacher" width="100%" height="100%">
			<grid:GridData headerArray="{teacherArray}" textAlign="center" width="100%" height="100%"
						   headerName="Teacher"/>
		</mx:Canvas>
		<mx:Canvas label="Student" width="100%" height="100%">
			<grid:GridData headerArray="{studentArray}" textAlign="center" width="100%" height="100%"
						   headerName="Student"/>
		</mx:Canvas>
		<mx:Canvas label="Course" width="100%" height="100%">
			<grid:GridData headerArray="{classArray}" textAlign="center" width="100%" height="100%"
						   headerName="Course"/>
		</mx:Canvas>
	</mx:TabNavigator>
	
</mx:Canvas>
(3)DynamicGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" ;
				width="100%" height="100%" xmlns:data="data.*">
	<mx:VBox width="100%" height="100%">
		<data:DGridHeader width="100%" height="100%"/>
	</mx:VBox>
</mx:Application>
3, The design results
(1)Teacher


(2)Student


(3)Course








Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Louis at December 09, 2013 - 5:22 AM