Flex Spark 数据网格 - 选项卡专注于自定义 GridItemRenderer答案

【问题标题】：Flex Spark datagrid - tab focus on a custom GridItemRendererFlex Spark 数据网格 - 选项卡专注于自定义 GridItemRenderer
【发布时间】：2012-01-09 11:14:02
【问题描述】：

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

我已经整理了一个简单的示例应用程序来说明我到目前为止所做的尝试（只需尝试通过按钮来查看我的意思）。我必须使用 GridItemEditor 吗？

提前致谢

Gav

<?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>

【问题讨论】：

标签： apache-flex datagrid tabs flex-spark

【解决方案1】：

数据网格

editable = true

在你设置的按钮列上

rendererIsEditable="true"

不可编辑的列

editable = false

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

【讨论】：