2016-07-18 7 views
2

Я работаю в Flex и пытаюсь получить 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, я пишу свою сетку в as3, а не mxml, но могу перевести.

<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); 
    } 
}