Flex Spark datagrid - 选项卡聚焦于自定义 GridItemRenderer

Question

我有一个带有自定义 itemrenderer 的 Spark 数据网格，其中包含两个按钮。我想允许用户在页面中的控件中切换时访问这两个按钮，这可能吗？

我已经整理了一个简单的示例应用程序，说明了迄今为止我所尝试的内容（只需尝试按选项卡浏览按钮即可了解我的意思）。我必须使用 GridItemEditor 吗？

预先感

谢加夫

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGStyledIR.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="450" height="450">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;

            // Data includes URL to album cover.
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:2},
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:3},
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:4},
                {Artist:'Pavement', Album:'Brighten the Corners', 
                    Price:11.99, Cover:'../assets/brighten.jpg', tabIndex:5}
            ]);
        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <s:DataGrid id="myGrid" 
                hasFocusableChildren="true" tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"
                dataProvider="{initDG}" selectionMode="singleCell" tabIndex="1"
                variableRowHeight="true">   
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="Artist" rendererIsEditable="true">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer hasFocusableChildren="true" tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true" 
                                                selectAll="meBtn.setFocus()">
                                <fx:Script>
                                    <![CDATA[
                                        import mx.controls.Alert;
                                    ]]>
                                </fx:Script>
                                <s:Button id="meBtn" label="{this.data.tabIndex} Click me" click="Alert.show('clicked','info')" tabIndex="{this.data.tabIndex}"
                                          tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>    
                </s:GridColumn>
                <s:GridColumn dataField="Album"/>
                <s:GridColumn dataField="Price"/>
            </s:ArrayList>
        </s:columns>       
    </s:DataGrid>

    <s:Button label="Some other button" tabIndex="100" click="Alert.show('this button below the grid is tab enabled fine','note')"  />
</s:Application>

Answer 1

datagrid

editable = true

在按钮的列上设置

rendererIsEditable="true"

不可编辑的列，

editable = false

当您使用自定义 GridItemRender 时，选项卡应该使用这些设置