2016-07-18 13 views
2

저는 플렉스에서 작업 중이며 수평 대신 가로로 탭에 스파크 datagrid를 가져 오려고합니다.가로 대신 세로로 탭하는 방법

var hBox:HBox = new HBox(); 
var templateDataGrid:spark.components.DataGrid = new spark.components.DataGrid(); 
templateDataGrid.dataProvider = dataGridList; 
templateDataGrid.columns = columnHeaders; 
templateDataGrid.sortableColumns = false; 
templateDataGrid.editable = true; 
hBox.addElement(templateDataGrid); 

아주 간단한 as3 구현을 HBox 내부에서 렌더링하고 있습니다.

여기 API의 전체 작동 예제입니다. mxml이 아닌 as3에 그리드를 작성하고 있지만 번역 할 수 있습니다. 당신은 그리드를 참조하고, 수평 이동시 탭보다보고 싶다면

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark"> 

<s:Panel title="Spark DataGrid Control Example which demonstrates the variableRowHeight and rowHeight properties" 
     width="75%" height="75%" 
     horizontalCenter="0" verticalCenter="0"> 

    <s:controlBarContent> 
     <s:HGroup verticalAlign="baseline"> 
      <s:CheckBox label="variableRowHeight={dataGrid.variableRowHeight}" selected="@{dataGrid.variableRowHeight}"/> 
      <s:Label text="  "/> <!-- blank space --> 
      <s:HSlider minimum="12" maximum="120" value="@{dataGrid.grid.rowHeight}"/> 
      <s:Label text="rowHeight={dataGrid.grid.rowHeight}"/> 
     </s:HGroup> 
    </s:controlBarContent>  

    <s:DataGrid id="dataGrid" left="5" right="5" top="5" bottom="5" editable="true"> 
     <s:ArrayCollection> 
      <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/> 
      <s:DataItem key="1001" name="Brush" price="110.01" call="true"/> 
      <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/> 
      <s:DataItem key="1003" name="Drill" price="130.03" call="true"/> 
      <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/> 
      <s:DataItem key="1005" name="File" price="150.05" call="true"/> 
      <s:DataItem key="1006" name="Gouge" price="160.06" call="false"/> 
      <s:DataItem key="1007" name="Hook" price="170.07" call="true"/> 
      <s:DataItem key="1008" name="Ink" price="180.08" call="false"/> 
      <s:DataItem key="1009" name="Jack" price="190.09" call="true"/>    
     </s:ArrayCollection> 
    </s:DataGrid> 
</s:Panel> 
</s:Application> 

그리드 예

api here에서 볼 수 있습니다. 나는 그것을 수직으로 가고 싶다!

+0

이 http://stackoverflow.com/questions/4428871/how-to-change-tab-ordering-in-flex-actionscript-sdk-3-5에 나타낸 바와 같이 – www0z0k

+0

@ www0z0k 도움이 될 수 있습니다 예를 들어's : Datagrid'는 행과 열을 DisplayObjects로 표시하지 않고 대신 arraycollection과 인터페이스합니다. 그래서 그 링크는이 질문과 관련이 없습니다. – kosmos

답변

0

여기까지 제가 지금까지 있습니다. 그 사람이 탭 키를 놓으면 그들이 어디에 있는지보고 다른 위치로 간다는 점에서 작동합니다. (필자의 경우에는 하나가됩니다.) 내장 된 탭 네비게이션은 KEY_DOWN에서 발생하며 KEY_UP에서 발생합니다. 따라서 선택한 항목이 바운스되어 가장 좋지 않을 수 있습니다. 이 부분은 GridSelectionMode.SINGLE_CELL에서 작동합니다.

myGrid.addEventListener(KeyboardEvent.KEY_UP, selectionChangingHandler); 

private function selectionChangingHandler(event:KeyboardEvent):void 
{ 
    if(event.keyCode == Keyboard.TAB){ 
     var selectedCell:CellPosition = event.currentTarget.selectedCell; 
     var columnLength = event.currentTarget.grid.columns.length; 
     var rowLength = event.currentTarget.grid.dataProvider.length; 
     var columnIndex:Number = selectedCell.columnIndex; 
     var rowIndex:Number = selectedCell.rowIndex+1; 

     if(rowLength == rowIndex){ 
      if(columnIndex == columnLength-1){ 
       columnIndex = 0; 
       rowIndex = 0; 
      }else{ 
       columnIndex = columnIndex+1; 
       rowIndex = 0; 
      } 
     } 
     var success:Boolean = event.currentTarget.startItemEditorSession(rowIndex,columnIndex); 
     event.currentTarget.setSelectedCell(rowIndex,columnIndex); 
    } 
}