Apache Royale 上的 DataGrid 单元格背景颜色问题

Posted 2023-02-23

【中文标题】Apache Royale 上的 DataGrid 单元格背景颜色问题

【英文标题】：DataGrid cell background color issue on Apache Royale

【发布时间】：2019-10-16 21:42:04

【问题描述】：

我们不要拿这段代码

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" 
               xmlns:local="*" xmlns:binding="org.apache.royale.binding.*" applicationComplete="ev_applicationComplete()" >

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>

    <js:initialView>

        <js:View>
            <js:beads>
                <js:VerticalLayout/>
            </js:beads>

            <js:DataGrid id="mydg" x="20"   rowHeight="40">
                <js:columns>
                    <js:DataGridColumn label="Name" dataField="label" columnWidth="100" />
                    <js:DataGridColumn label="Sales" dataField="value" columnWidth="300" />
                </js:columns>
            </js:DataGrid>

            <js:TextButton text="Set again" click="ev_setdp()"/>
        </js:View>
    </js:initialView>

    <fx:Style>
        @namespace js "library://ns.apache.org/royale/basic";

        .DataGridColumnList .StringItemRenderer 
            border-style: solid;
            border-color: #CCCCCC;
            border-width: 1px;
            background-color: #ff0000;
            line-height: 40px;
            padding: 2px;
        

        .DataGridColumnList .DataItemRenderer 
            border-style: solid;
            border-color: #CCCCCC;
            border-width: 1px;
            background-color: #ff0000;
            line-height: 40px;
            padding: 2px;
        


    </fx:Style>

    <fx:Script>
    <![CDATA[

        import org.apache.royale.collections.ArrayList;

        private function ev_applicationComplete():void 
            mydg.dataProvider = ar;
        

        private function ev_setdp():void 
            mydg.dataProvider = null;
            mydg.dataProvider = ar;
        

        private var ar:Array = ["Bob", "Joe", "Frank", "Sally"];

    ]]>
    </fx:Script>
</js:Application>

这显示了一个带有红色单元格背景的网格。 如果滚动一个单元格，则显示灰色，但滚动时颜色不再是红色。

1)这是一个错误吗？我错过了什么吗？

2) 谁能告诉我如何触发 rollovercolor ？ （灰色的）。我试过.DataGridColumnList .StringItemRenderer:hover但不起作用

对于 1) 我认为问题是 element.style 在推出后没有正确的颜色

【问题讨论】：

我正在努力了解您的确切需求。您是否希望默认为红色、翻转时为灰色、展开时为红色？

是的，就是这样。

【参考方案1】：

尝试将样式块更改为：

<fx:Style>
    @namespace js "library://ns.apache.org/royale/basic";

    .DataGridColumnList 
        background-color: #ff0000;
    

    .StringItemRenderer 
        border-style: solid;
        border-color: #CCCCCC;
        border-width: 1px;
        line-height: 40px;
        padding: 2px;
    

</fx:Style>