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

时间:2012-01-09 11:14:03

标签: flex datagrid tabs flex-spark

我有一个带有自定义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>

1 个答案:

答案 0 :(得分:1)

数据网格

editable = true

在按钮的列上设置

rendererIsEditable="true"

不可编辑的列

editable = false

使用自定义GridItemRender

时,Tabbing应与这些设置一起使用