Question

以下是我在Flex 4中制作的MXML模块：

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"
           creationComplete="init()"
           layout="absolute" width="100%" height="100%">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Style source="BMChartModule.css" />

    <s:Panel id="panel" title="Benchmark Results" height="100%" width="100%" dropShadowVisible="false">
        <mx:TabNavigator id="tn" height="100%" width="100%" />
    </s:Panel>

    <fx:Script>
        <![CDATA[
            import flash.events.Event;

            import mx.charts.ColumnChart;
            import mx.charts.effects.SeriesInterpolate;
            import mx.controls.Alert;

            import spark.components.BorderContainer;
            import spark.components.Button;
            import spark.components.Label;
            import spark.components.NavigatorContent;
            import spark.components.RadioButton;
            import spark.components.TextInput;
            import spark.layouts.*;

            private var xml:XML;

            private function init():void
            {               
                var seriesInterpolate:SeriesInterpolate = new SeriesInterpolate();
                seriesInterpolate.duration = 1000;

                xml = parentApplication.model.xml;
                var sectorList:XMLList = xml.SECTOR;

                for each(var i:XML in sectorList)
                {               
                    var ncLayout:HorizontalLayout = new HorizontalLayout();

                    var nc:NavigatorContent = new NavigatorContent();
                    nc.label = i.@NAME;
                    nc.name = "NC_" + nc.label;
                    nc.layout = ncLayout;
                    tn.addElement(nc);

                    var cC:ColumnChart = new ColumnChart();
                    cC.percentWidth = 70;
                    cC.name = "CC";
                    nc.addElement(cC);

                    var bClayout:VerticalLayout = new VerticalLayout();

                    var bC:BorderContainer = new BorderContainer();
                    bC.percentWidth = 30;
                    bC.layout = bClayout;
                    nc.addElement(bC);

                    var bClabel:Label = new Label();
                    bClabel.percentWidth = 100;
                    bClabel.text = "Select a graph to view it in the column chart:";

                    var dpList:XMLList = sectorList.(@NAME == i.@NAME).DATAPOINT;
                    for each(var j:XML in dpList)
                    {       
                        var rB:RadioButton = new RadioButton();
                        rB.groupName = "dp";
                        rB.label = j.@NAME;
                        rB.addEventListener(MouseEvent.CLICK, rBclick);
                        bC.addElement(rB);
                    }

                }           
            }

            private function rBclick(e:MouseEvent):void
            {
                var selectedTab:NavigatorContent = this.tn.selectedChild as NavigatorContent;
                var colChart:ColumnChart = selectedTab.getChildByName("CC") as ColumnChart;
                trace(selectedTab.getChildAt(0));
            }
        ]]>
    </fx:Script>

</mx:Module>

我正在编写此函数rBclick以在单击单选按钮时重绘柱形图。为了做到这一点，我需要使用actionscript在舞台上找到柱形图。我目前在这里有3行代码来执行此操作：

            var selectedTab:NavigatorContent = this.tn.selectedChild as NavigatorContent;
            var colChart:ColumnChart = selectedTab.getChildByName("CC") as ColumnChart;
            trace(selectedTab.getChildAt(0));

进入tabnavigator中的活动选项卡很容易，但是然后选择了Tab.getChildAt（0） - 我期待它是图表 - 是一个“spark.skin.spark.SkinnableContainerSkin”...无论如何，我可以继续使用这个有点烦人的代码遍历树，但我希望有一个更简单的方法。

所以简而言之，在运行时我想用尽可能少的代码识别活动选项卡中的柱形图，这样我就可以重绘它。任何建议都将不胜感激。

Answer 1

看来你可以使用一些抽象。

创建一个扩展HorizontalLayout的新mxml组件，其中包含柱形图，垂直布局，边框容器，标签等。
在其中，为chart实例

ColumnChart

声明一个公共init（）方法，表示SECTOR元素的项目并初始化该组件。
将此新mxml组件的实例作为子项添加到TabNavigator

现在，您可以轻松访问柱形图NewComp(tn.selectedTab).chart

Flex 4：更轻松地穿越舞台

1 个答案: