ItemRenderer 通过 ItemEditor 在 AdvancedDataGrid 上显示

发布于 2024-10-31 03:17:50 字数 1556 浏览 4 评论 0原文

我对 Flex 还很陌生,所以很可能我遗漏了一些明显的东西,但在第一个示例代码中,一切都按预期工作。不编辑单元格时,它会以纯文本形式显示居中日期。编辑时,它会显示一个 DateField 编辑器。据我所知,第二个示例完全相同,除了它是一个 AdvancedDataGridColumn 之外。将该代码与 AdvancedDataGrid 结合使用,当我进入编辑模式时,我可以看到 DateField 编辑器后面的普通项目渲染器中的文本(在文本输入和日历图标之间) 。我在这里做错了什么吗?我怎样才能隐藏它?提前致谢。

示例 1:

<mx:DataGridColumn id="endColumn"
                   dataField="endDate"
                   headerText="End"
                   editorDataField="selectedDate"
                   editable="true"
                   labelFunction="{this.formatDate}"
                   width="80"
                   textAlign="center" >
    <mx:itemEditor>
        <fx:Component>
            <mx:DateField yearNavigationEnabled="true" formatString="DD/MM/YY" />
        </fx:Component>
    </mx:itemEditor>
</mx:DataGridColumn>

示例 2:

<mx:AdvancedDataGridColumn id="endColumn"
                           dataField="endDate"
                           headerText="End"
                           editorDataField="selectedDate"
                           editable="true"
                           labelFunction="{this.formatDate}"
                           width="80"
                           textAlign="center" >
    <mx:itemEditor>
        <fx:Component>
            <mx:DateField yearNavigationEnabled="true" formatString="DD/MM/YY" />
        </fx:Component>
    </mx:itemEditor>
</mx:AdvancedDataGridColumn>

I'm pretty new to Flex, so there's probably a good chance I'm missing something obvious, but in the first example code, everything works as expected. When not editing the cell, it shows a centered date as plain text. When editing, it shows a DateField editor. The second example is exactly the same as far as I can tell, other than the fact that it is an AdvancedDataGridColumn. Using that code with an AdvancedDataGrid, when I go into edit mode I can see the text from the normal item renderer behind the DateField editor (between the text input and calendar icon). Did I do something wrong here? How can I hide that? Thanks in advance.

Example 1:

<mx:DataGridColumn id="endColumn"
                   dataField="endDate"
                   headerText="End"
                   editorDataField="selectedDate"
                   editable="true"
                   labelFunction="{this.formatDate}"
                   width="80"
                   textAlign="center" >
    <mx:itemEditor>
        <fx:Component>
            <mx:DateField yearNavigationEnabled="true" formatString="DD/MM/YY" />
        </fx:Component>
    </mx:itemEditor>
</mx:DataGridColumn>

Example 2:

<mx:AdvancedDataGridColumn id="endColumn"
                           dataField="endDate"
                           headerText="End"
                           editorDataField="selectedDate"
                           editable="true"
                           labelFunction="{this.formatDate}"
                           width="80"
                           textAlign="center" >
    <mx:itemEditor>
        <fx:Component>
            <mx:DateField yearNavigationEnabled="true" formatString="DD/MM/YY" />
        </fx:Component>
    </mx:itemEditor>
</mx:AdvancedDataGridColumn>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

℡寂寞咖啡 2024-11-07 03:17:50

dateInput 和图标之间的空间通常是透明的。我不确定为什么 mx:DataGrid 隐藏渲染的文本,而 mx:AdvancedDataGrid 不隐藏。

无论如何,有一个简单的方法可以解决您的问题。只需将 itemEditors 背景涂成您喜欢的颜色即可。以下应该有效。

<mx:itemEditor>
    <fx:Component>
        <mx:DateField yearNavigationEnabled="true" formatString="DD/MM/YY">
            <fx:Script>
                <![CDATA[
                    protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                    {
                        graphics.beginFill(0xFFFFFF); // white
                        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                        graphics.endFill();

                        super.updateDisplayList(unscaledWidth, unscaledHeight);
                    }
                ]]>
            </fx:Script>
        </mx:DateField>
    </fx:Component>
</mx:itemEditor>

The space between the dateInput and the icon is normally transparent. I'm not sure why mx:DataGrid hides the rendered text and the mx:AdvancedDataGrid doesn't.

Anyway, there's an easy solution to your problem. Just paint the itemEditors background in the color you like. The following should work.

<mx:itemEditor>
    <fx:Component>
        <mx:DateField yearNavigationEnabled="true" formatString="DD/MM/YY">
            <fx:Script>
                <![CDATA[
                    protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                    {
                        graphics.beginFill(0xFFFFFF); // white
                        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                        graphics.endFill();

                        super.updateDisplayList(unscaledWidth, unscaledHeight);
                    }
                ]]>
            </fx:Script>
        </mx:DateField>
    </fx:Component>
</mx:itemEditor>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文