带皮肤的按钮的Flex DataGrid

Question

Try as I may, I am not able to skin a spark Button, when I place the button within a spark dataGrid. I am constrained to using the halo theme.

I have created the button renderer in a separate mxml file; I have separate buttons outside the dataGrid that show the skin correctly, so I am sure that there is nothing wrong with the skin. The whole point of this is to use the same skin inside the dataGrid as outside

The following code shows the same behavior that I am seeing; in this case the renderer is created in line. It seems like the skinClass is not respected. Or is there another way to do it.

<s:DataGrid id="dg" width="500" dataProvider="{employees2}">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="name" headerText="Name">
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                            <s:Button label="Press Me"
                                      top="0" bottom="0" left="0" right="0"
                                      skinClass="MyButtonSkin" />
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </GridColumn>   
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

In file MyButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
         minWidth="21" minHeight="21" 
         alpha.disabled="0.5">

<fx:Metadata>
    <![CDATA[ 
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.Button")]
    ]]>
</fx:Metadata>

<fx:Script fb:purpose="styling">
    <![CDATA[         
        /* Define the skin elements that should not be colorized. 
        For button, the graphics are colorized but the label is not. */
        static private const exclusions:Array = ["labelDisplay"];

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

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

    ]]>        
</fx:Script>

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>

<!-- layer 2: fill -->
<!--- @private -->
<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="10">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xFAFAFA" 
                             color.over="0xBBBDBD" 
                             color.down="0xAAAAAA" 
                             alpha="0.85" />
            <s:GradientEntry color="0x808080" 
                             color.over="0x9FA0A1" 
                             color.down="0x929496" 
                             alpha="0.85" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
<s:Label id="labelDisplay"
         textAlign="center"
         maxDisplayedLines="1"
         horizontalCenter="0" verticalCenter="1" verticalAlign="middle">
</s:Label>

</s:SparkButtonSkin>

Answer 1

It appears that scaling the button to the size of the grid item does not size the corner radius.

I ended up with a button 200x200 pixels with a corner radius of 6 pixels; it just couldn't be seen. I upped the value to 25 and now I can see it