代码之家  ›  专栏  ›  技术社区  ›  M364M4N cro

切换DataGrid中分隔线的可见性

flash-builder datagrid apache-flex
  •  0
  • M364M4N cro  · 技术社区  · 11 年前

    我需要让用户切换spark数据网格中列和行之间分隔线的可见性。我尝试在它的皮肤类中创建一个方法来实现这一点(创建了一个新的皮肤类),如下所示: 

    <fx:Component id="columnSeparator">
        <s:Line>
            <fx:Script>
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    public function set columnSeperatorVisible(value:Boolean):void
                    {
                        if(value){
                            columnSeperatorLine.alpha = 1;
                        }
                        else{
                            columnSeperatorLine.alpha = 0;
                        }
                    }
                ]]>
            </fx:Script>

            <s:stroke>
                <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="columnSeperatorLine" />
            </s:stroke>
        </s:Line>
    </fx:Component>

    但我无法从实际皮肤的脚本块访问该方法,也无法在使用 

        datagrid.skin.columnSeperatorVisible = false;

    我不想制作4个不同的皮肤类,它们具有不同的分隔线可见性,我可以分配给数据网格,所以有人知道我如何做到这一点吗?

    我使用自定义皮肤: 

    <s:SparkSkin 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5" minWidth="89" minHeight="84" xmlns:skins="xxx.xxx.xxx.xxx">

<fx:Metadata>
    <![CDATA[
        /** 
         *  @copy spark.skins.spark.ApplicationSkin#hostComponent
         *
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5
         *  @productversion Flex 4.5
         */
        [HostComponent("spark.components.DataGrid")]
    ]]>
</fx:Metadata>

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<fx:Declarations>
    <!--- @private -->        
    <fx:Component id="alternatingRowColorsBackground">
        <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    /**
                     * @private
                     */
                    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                    {
                        const dataGrid:DataGrid = grid.dataGrid;
                        if (!dataGrid)
                            return;

                        const colors:Array = dataGrid.getStyle("alternatingRowColors");
                        if (colors && (colors.length > 0))
                        {
                            dataGrid.styleManager.getColorNames(colors); // lazily replace color names with ints
                            rowBackgroundFillColor.color = colors[rowIndex % colors.length];
                        }
                        else
                        {          
                            // This should be the same as bgFill.color.
                            rowBackgroundFillColor.color = 0xFFFFFF;
                        }
                    }
                ]]>
            </fx:Script>  
            <s:fill>
                <!--- @private -->   
                <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF"/>
            </s:fill>
        </s:Rect>
    </fx:Component>

    <!--- @private -->        
    <fx:Component id="caretIndicator">
        <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    /**
                     * @private
                     */
                    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                    {
                        const dataGrid:DataGrid = grid.dataGrid;
                        if (!dataGrid)
                            return;

                        const color:uint = dataGrid.getStyle("caretColor");
                        caretIndicatorFill.color = color;
                    }
                ]]>
            </fx:Script>

            <s:stroke>
                <!--- @private -->
                <s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/>
            </s:stroke>
        </s:Rect>
    </fx:Component>

    <!--- @private -->
    <fx:Component id="columnSeparator">
        <s:Line>
            <fx:Script>
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    public function set columnSeperatorVisible(value:Boolean):void
                    {
                        if(value){
                            columnSeperatorLine.alpha = 1;
                        }
                        else{
                            columnSeperatorLine.alpha = 0;
                        }
                    }
                ]]>
            </fx:Script>

            <s:stroke>
                <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="columnSeperatorLine" />
            </s:stroke>
        </s:Line>
    </fx:Component>

    <!--- 
    Defines the appearance of the drop indicator.
    The DataGrid's layout takes care to size and position the dropIndicator.
    -->
    <fx:Component id="dropIndicator">
        <s:Group>
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:fill>
                    <!--- Defines the color of the background. -->
                    <s:SolidColor color="0xBBBBBB" />
                </s:fill>
                <s:stroke>
                    <s:SolidColorStroke color="0x868686" weight="1"/>
                </s:stroke>
            </s:Rect>
        </s:Group>
    </fx:Component>

    <!--- Defines the value of the columnSeparator property for the columnHeaderGroup. -->
    <fx:Component id="headerColumnSeparator">
        <s:Line>
            <s:stroke>
                <s:SolidColorStroke color="0xFFFFFF" weight="1" caps="square"/>
            </s:stroke>
        </s:Line>
    </fx:Component>       

    <!--- Defines the value of the headerRenderer property for the columnHeaderGroup. 
          The default is spark.skins.spark.DefaultGridHeaderRenderer -->
    <fx:Component id="headerRenderer">
        <skins:AirDataGridHeaderRenderer/>
    </fx:Component>






    <!--- @private -->
    <fx:Component id="hoverIndicator">
        <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    /**
                     * @private
                     */
                    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                    {
                        const dataGrid:DataGrid = grid.dataGrid;
                        if (!dataGrid)
                            return;

                        const color:uint = dataGrid.getStyle("rollOverColor");
                        hoverIndicatorFill.color = color;
                    }
                ]]>
            </fx:Script>

            <s:fill>
                <!--- @private -->
                <s:SolidColor id="hoverIndicatorFill" color="0xCEDBEF"/>
            </s:fill>
        </s:Rect>
    </fx:Component>




    <!--- @private -->
    <fx:Component id="rowSeparator">
        <s:Line>
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    public function set rowSeperatorVisible(value:Boolean):void
                    {
                        if(value){
                            rowSeperatorLine.alpha = 1;
                        }
                        else{
                            rowSeperatorLine.alpha = 0;
                        }
                    }
                ]]>
            </fx:Script>


            <s:stroke>
                <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square" id="rowSeperatorLine"/>
            </s:stroke>
        </s:Line>
    </fx:Component>

    <!--- @private -->
    <fx:Component id="selectionIndicator">
        <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    import spark.components.DataGrid;
                    import spark.components.Grid;

                    /**
                     * @private
                     */
                    public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                    {
                        const dataGrid:DataGrid = grid.dataGrid;
                        if (!dataGrid)
                            return;

                        const color:uint = dataGrid.getStyle("selectionColor");
                        selectionIndicatorFill.color = color;
                    }
                ]]>
            </fx:Script>

            <s:fill>
                <!--- @private -->
                <s:SolidColor id="selectionIndicatorFill" color="0xA8C6EE"/>
            </s:fill>                
        </s:Rect>
    </fx:Component>

    <!--- @private -->
    <fx:Component id="editorIndicator">
        <s:Rect>
            <s:fill>
                <s:SolidColor color="0xFFFFFF"/>
            </s:fill>                
        </s:Rect>
    </fx:Component>                    

</fx:Declarations>

<fx:Script fb:purpose="styling">
<![CDATA[
    import mx.events.FlexEvent;
    static private const exclusions:Array = ["scroller", "background", "columnHeaderGroup"];
    static private const contentFill:Array = ["bgFill"];

    /**
     * @private
     */
    override public function get colorizeExclusions():Array {return exclusions;}

    /**
     * @private
     */
    override public function get contentItems():Array {return contentFill};

    /**
     * @private
     */
    override protected function initializationComplete():void
    {
        useChromeColor = true;
        super.initializationComplete();
    }

    /**
     * @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        if (getStyle("borderVisible") == true)
        {
            border.visible = true;
            background.left = background.top = background.right = background.bottom = 1;
            scroller.minViewportInset = 1;
        }
        else
        {
            border.visible = false;
            background.left = background.top = background.right = background.bottom = 0;
            scroller.minViewportInset = 0;
        }

        borderStroke.color = getStyle("borderColor");
        borderStroke.alpha = getStyle("borderAlpha");

        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

    /* public function set rowSeperatorVisible(value:Boolean):void
    {
        var test:* = grid.rowSeparator.newInstance();
        test.rowSeperatorVisible = value;
        grid.rowSeparator = test as IFactory;
    }

    public function set columnSeperatorVisible(value:Boolean):void
    {
        var test:* = grid.columnSeparator.newInstance();
        test.columnSeperatorVisible = value;
        grid.columnSeparator = test as IFactory;
    } */

]]>
</fx:Script>

<!-- column header, content -->
<s:VGroup horizontalAlign="justify" gap="0" left="0" right="0" top="0" bottom="0">

    <!--- @private
        The GridColumnHeaderGroup's padding values are used to line it up with the Grid
        which is inset by the Scroller's minViewportInset, which provides room for the 
        DataGrid border - the last Rect element below.
    -->
    <s:GridColumnHeaderGroup id="columnHeaderGroup" minHeight="21"
        paddingLeft="1" paddingRight="1" paddingTop="1"
        columnSeparator="{headerColumnSeparator}"
        headerRenderer="{headerRenderer}"/>

    <s:Group height="100%">

        <!--- @private -->
        <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
            <s:fill>
                <!--- Defines the color of the background. The default color is 0xFFFFFF. -->
                <s:SolidColor id="bgFill" color="#22A86D" />
            </s:fill>
        </s:Rect>

        <!-- header separator, scroller and grid -->
        <s:VGroup horizontalAlign="justify" height="100%" width="100%" gap="-1">
            <!--- @private -->
            <s:Line id="headerSeparator">
                <s:stroke>
                    <s:SolidColorStroke color="0xE6E6E6" weight="1" caps="square"/>
                </s:stroke>
            </s:Line>          

            <!--- @private -->
            <s:Scroller id="scroller" minViewportInset="1" hasFocusableChildren="false" height="100%">
                <!--- @private -->
                <s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer">
                    <s:gridView>
                        <fx:Component>
                            <s:GridView>
                                <s:GridLayer name="backgroundLayer"/>
                                <s:GridLayer name="selectionLayer"/>
                                <s:GridLayer name="editorIndicatorLayer"/>                            
                                <s:GridLayer name="rendererLayer"/>
                                <s:GridLayer name="overlayLayer"/>
                            </s:GridView>
                        </fx:Component>
                    </s:gridView>
                </s:Grid>                    
            </s:Scroller>
        </s:VGroup>

    </s:Group>

</s:VGroup>

<!-- border -->
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border">
    <s:stroke>
        <!--- @private -->
        <s:SolidColorStroke id="borderStroke" weight="1"/>
    </s:stroke>
</s:Rect>

    这段代码改变了可见性 

    var overlayLayer:GridLayer = (this.grid.getChildByName('overlayLayer') as GridLayer);
if(overlayLayer){
    overlayLayer.visible = Global.stringToBoolean(item.value);
}
    1 回复  |  直到 11 年前
        1
  •  3
  •   Timofei Davydik    11 年前

    列和行分隔符位于 overlayLayer 网格的。因此,切换其可见性的方法是: 

    var overlayLayer:GridLayer = dataGrid.grid.getChildByName('overlayLayer');
overlayLayer.visible = !overlayLayer.visible;

    如果您使用自定义皮肤,请确保 覆盖层 存在于您的皮肤中。您可以从SDK皮肤复制所有层: 

    <s:Grid id="grid" itemRenderer="spark.skins.spark.DefaultGridItemRenderer">
    <s:GridLayer name="backgroundLayer"/>
    <s:GridLayer name="selectionLayer"/>
    <s:GridLayer name="editorIndicatorLayer"/>                            
    <s:GridLayer name="rendererLayer"/>
    <s:GridLayer name="overlayLayer"/>
</s:Grid>

    对于SDK 4.10,请尝试 DisplayObjectContainer(dataGrid.grid.getElementAt(0)).getChildByName('overlayLayer').visible = ...

    推荐文章
    SpaceCowboy2071  ·  使用Firefox(FlashBuilder 4.7)调试Flash?
    8 年前
    Mohammed Arslan  ·  Adobe Air 23+iOS 10.1.1全屏
    8 年前
    M364M4N cro  ·  切换DataGrid中分隔线的可见性
    11 年前
    user773737  ·  缩小位图会使其看起来更糟吗?
    11 年前
    tamak  ·  可以根据日期/时间值而不是普通的文本字符串/alpha对Flex arrayCollection执行排序吗?
    12 年前
    sbatson5  ·  向函数创建的对象添加eventListener
    12 年前
    Mano  ·  Adobe Air支持RTMFP吗?
    12 年前
    Guerreiro  ·  如何使用嵌入SWC的字体
    12 年前
    Guerreiro  ·  如何从SWC在Flash Builder项目中添加SimpleButton?
    12 年前
    1.21 gigawatts  ·  获取错误Adobe AIR版本未安装错误
    12 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号