2012-01-09 8 views
0

私は2つのボタンを含むカスタムitemrendererを持つspark DataGridを持っています。私は、ページのコントロールをタブで移動するときに、ユーザーがこれらの2つのボタンにアクセスできるようにしたいと考えています。Flex Spark DataGrid - カスタムGridItemRendererのタブ

私はこれまで試みてきたことを示す簡単なサンプルアプリケーションをまとめました(私が何を意味するかを見るためにボタンをタブで動かすだけです)。私はGridItemEditorを使用する必要がありますか?あなたは

rendererIsEditable="true" 

非編集可能な列を設定しますボタンの列に

事前に感謝

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

データグリッド

editable = true 

editable = false 

カスタムGridItemRender

を使用するときにタブ移動は、これらの設定で動作するはずです
関連する問題