如何在flex中访问内联组件的元素？答案

【问题标题】：How to reach elements of an inline component in flex?如何在flex中访问内联组件的元素？
【发布时间】：2011-10-14 01:54:06
【问题描述】：

我对内联组件有疑问。我想从另一个组件访问一个内联组件。从第一个组件，我想更改第二个组件中名为“Add”的链接按钮的“启用”值。尽管我给了第二个“id”和“className”，但我既不能达到它也不能达到它的元素..有没有办法做到这一点？

*在第一个组件中，“CodedDescriptionItemEditor”组件中有一个文本输入。我想验证它并根据验证启用我上面提到的按钮..

顺便说一句，这些都在数据网格中。在datagrid中，总有一行可以输入数据，通过“添加”按钮可以保存它。保存后显示为文本..

谢谢你..

这是我的代码：

<mx:columns>
        <mx:DataGridColumn headerText="{Problem}" wordWrap="true" textAlign="left" sortable="false">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox>
                        <mx:ViewStack selectedIndex="{outerDocument.index(data)}" >
                            <mx:HBox>
                                <mv:CodedDescriptionItemEditor id="editor" codePM="{outerDocument.problemListPanelPM.getProblemDescPM(data)}" 
                                    width="100%" styleName="phrFormItemInput"/>
                            </mx:HBox>
                            <mx:HBox>
                                <mv:CodedDescriptionItemRenderer id="renderer" codedDescPM="{outerDocument.problemListPanelPM.getProblemDescPM(data)}" />
                            </mx:HBox>  
                        </mx:ViewStack> 
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="" textAlign="center" editable="false" width="50" resizable="false" sortable="false">
            <mx:itemRenderer>
                <mx:Component className="buttonColumn">
                        <mx:ViewStack selectedIndex="{outerDocument.index(data)}" >
                            <mx:HBox horizontalAlign="center" width="100%">
                                <mx:LinkButton id="Add" icon="@Embed('img/add.png')"
                                    toolTip="{outerDocument.Add_Problem}"
                                    click="outerDocument.addHandWritten()"
                                    enabled="false" />
                            </mx:HBox>
                            <mx:HBox horizontalAlign="center" width="100%">
                                <mx:LinkButton id="Delete" icon="@Embed('img/delete.png')"
                                    toolTip="{outerDocument.Remove_problem}"
                                    click="outerDocument.removeProblem()"/>
                            </mx:HBox>
                        </mx:ViewStack>                     
                </mx:Component>
            </mx:itemRenderer>                          
        </mx:DataGridColumn>
    </mx:columns>

【问题讨论】：

标签： apache-flex flex3 components mxml itemrenderer

【解决方案1】：

MXML 中的内联组件不是实例而是类。所以那种“触及”是没有意义的。要将这些知识结合在一起来操作它们，我建议您遵循以下简单规则（我遵循并且在理解类/实例关系方面没有问题）：

不要在 MXML 中使用内联组件，不包括原型设计阶段。

因此，在您的情况下，我建议您将内联组件提取到单独的 MXML 类中并抛出所有 outerDocument 引用（您可以将它们替换为带有冒泡的事件）。在那之后，我认为理解和改进您的设计并找到合适的解决方案会容易得多。

另一个建议是使用数据驱动的方式来操作渲染器。这种方式是操作数据提供者的数据项，而不是直接从外部文档中获取和设置数据。使用数据绑定在不同列的不同项渲染器之间绑定更改的数据。

【讨论】：

"...将内联组件提取到单独的 MXML 类中..." 我通常会尝试这样做，但这次我没有这样做。感谢您的详细建议 :)

【解决方案2】：

在这种情况下，您可能希望在 outerDocument 中保留一个布尔变量 isAddEnabled，并按如下方式更改您的启用：

enabled="{outerDocument.isAddEnabled}"

根据您的验证条件更改此 isAddEnabled。由于您不希望将其应用于所有项目，因此请在您的 dataProvider 中保留一个属性（首选）或维护另一个与您的 dataProvider 长度相同的集合（不推荐）。

【讨论】：