Flex grid 复杂表头
Flex grid 复杂表头
第一种 最简单的两重表头
code 如下：
<?xml version="1.0"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
private function init()
{
}
]]>
</fx:Script>
<mx:Panel title="AdvancedDataGrid Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection2 id="gc" source="{dpFlat}">
<mx:grouping>
<mx:Grouping>
<mx:GroupingField name="Region"/>
<mx:GroupingField name="Territory"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection2>
</mx:dataProvider>
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumnGroup id="headerText" headerText="Territory">
<mx:AdvancedDataGridColumn dataField="Territory"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
</mx:AdvancedDataGridColumnGroup>
<mx:AdvancedDataGridColumnGroup id ="Actual" headerText="Actual">
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Panel>
</mx:Application>
第二种 复杂表头
定制ClassFactory。。。重写展现方式
Code
<?xml version="1.0"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
{Region:"Southwest", Territory:"Arizona",
Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
{Region:"Southwest", Territory:"Central California",
Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
{Region:"Southwest", Territory:"Nevada",
Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
{Region:"Southwest", Territory:"Northern California",
Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
{Region:"Southwest", Territory:"Southern California",
Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);
private function init()
{
var classFactory = new ClassFactory(HeaderRenderer);
classFactory.properties = {type: 'region1', defaultExpandCollapseImage: 'region1', headerLevel1: 'region1', headerLevel2: 'region2', headerLevel3:'region3'};
region.headerRenderer = classFactory;
classFactory = new ClassFactory(TestGridHeader);
classFactory.properties = {fullName: 'Test', shortName: 'Test', mouseOverTitle: 'Test Territory', hasAccess: true};
test1.headerRenderer = classFactory;
// programViewGridColumns.push(programHierarchyColumn);
}
]]>
</fx:Script>
<mx:Panel title="AdvancedDataGrid Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:AdvancedDataGrid id="myADG" sortableColumns="false" styleName="datagridsummary" verticalScrollPolicy="auto" resizableColumns="false" draggableColumns="false"
width="100%" height="100%"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection2 id="gc" source="{dpFlat}">
<mx:grouping>
<mx:Grouping>
<mx:GroupingField name="Region"/>
<mx:GroupingField name="Territory"/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection2>
</mx:dataProvider>
<mx:groupedColumns>
<mx:AdvancedDataGridColumn id ='region' dataField="Region" width="300"/>
<mx:AdvancedDataGridColumnGroup id="headerText" headerText="Territory" >
<mx:AdvancedDataGridColumn id="test1" dataField="Territory" width="100" />
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep" width="100"/>
</mx:AdvancedDataGridColumnGroup>
<mx:AdvancedDataGridColumnGroup id ="Actual" headerText="Actual">
<mx:AdvancedDataGridColumn dataField="Actual" width="100"/>
<mx:AdvancedDataGridColumn dataField="Estimate" width="100"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Panel>
</mx:Application>
classfactory 如下：
HeaderRenderer
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" horizontalAlign="center" verticalAlign="top" horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" verticalGap="0" horizontalGap="0">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style source="./assets/css/main.css"/>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
public var type:String;
[Bindable]
public var defaultExpandCollapseImage:String;
[Bindable]
public var headerLevel1:String;
[Bindable]
public var headerLevel2:String;
[Bindable]
public var headerLevel3:String;
]]>
</fx:Script>
<mx:VBox width="100%">
<mx:HBox width="100%" height="100%">
<mx:Image source="{'./assets/images/plus.gif'}" toolTip="'Expand All'" click=""/>
<mx:Label text="{headerLevel1}" styleName="gridHeader" textDecoration="none"/>
</mx:HBox>
<mx:HBox width="100%" height="100%" paddingLeft="20">
<mx:Image source="{'./assets/images/sub_dot.gif'}"/>
<mx:Label text="{headerLevel2}" alpha="0.5" textDecoration="none"/>
</mx:HBox>
<mx:HBox width="100%" height="100%" paddingLeft="20" id="level3Header">
<mx:Image source="{'./assets/images/sub_dot.gif'}" visible="true"/>
<mx:Image source="{'./assets/images/sub_dot.gif'}"/>
<mx:Label text="{headerLevel3}" alpha="0.5" textDecoration="none"/>
</mx:HBox>
</mx:VBox>
</mx:HBox>
TestGridHeader
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.AntiAliasType;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import mx.containers.VBox;
import mx.controls.Alert;
import mx.controls.ToolTip;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.FlexGlobals;
import mx.messaging.AbstractConsumer;
public class TestGridHeader extends VBox implements IListItemRenderer {
[Bindable]public var fullName:String;
[Bindable]public var shortName:String;
[Bindable]public var mouseOverTitle:String;
[Bindable]public var hasAccess:Boolean = true;
[Bindable]public var wrapText:Boolean = false;
private var _lbl:TextField;
override protected function createChildren():void {
super.createChildren();
var _txtFormat:TextFormat = new TextFormat();
_txtFormat.font = "myPlainFont";
_txtFormat.size = 11;
_txtFormat.bold = true;
_txtFormat.color = 0x020264;
_txtFormat.align = "left";
_lbl = new TextField();
_lbl.alpha = 1
_lbl.wordWrap = wrapText;
_lbl.autoSize = TextFieldAutoSize.LEFT;
_lbl.embedFonts = true;
_lbl.antiAliasType = AntiAliasType.ADVANCED;
_lbl.defaultTextFormat = _txtFormat;
_lbl.rotation = 270;
_lbl.mouseEnabled = false;
_lbl.width = 60;
_lbl.height = 100;
var sprite:Sprite = new Sprite();
sprite.buttonMode = true;//Mouse Hand Cursor
sprite.addChild(_lbl);
rawChildren.addChild(sprite);
this.toolTip = mouseOverTitle;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeight);
if(shortName != null && shortName != "") {
_lbl.textColor = 0xffffff;
_lbl.text = shortName;
_lbl.y = 25;
_lbl.x = (width - _lbl.width)/2;
_lbl.textColor = 0x020264;
}
}
}
}
