2010-01-25 3 views
-1

두 개의 데이터 격자가 있고 커서가 첫 번째 데이터 격자 열의 끝에 도달하면 다음 데이터 격자로 이동하도록 탭 키 이벤트의 동작을 재정의하려고합니다.flex 데이터 격자 사용자 정의 탭 동작

힌트를 보내 주시면 감사하겠습니다.

마르쿠스

답변

3

마르쿠스, 이것은 바른 길에 당신을 얻을해야 어느 정도 기능 데모입니다 :

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> 
    <mx:Script> 
     <![CDATA[ 
      [Bindable] 
      private var src:Array = [ 
       { a:1, b:2, c:3 }, 
       { a:1, b:2, c:3 }, 
       { a:1, b:2, c:3 } 
       ]; 

      private function init() : void 
      { 
       this.systemManager.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); 
      } 

      private function onKeyDown(e:KeyboardEvent) : void 
      { 
       trace (dg1.rowCount, dg1.columnCount); 
       if (e.target.parent.parent.parent is DataGrid) 
        var dg:DataGrid = e.target.parent.parent.parent as DataGrid; 
        if (dg == dg1) 
         if (dg.editedItemPosition.columnIndex == dg.columnCount - 1) 
          if (dg.editedItemPosition.rowIndex == (dg.rowCount/2) - 1)         
           dg2.setFocus();     
      } 
     ]]> 
    </mx:Script> 
    <mx:VBox>   
    <mx:DataGrid id="dg1" dataProvider="{src}" tabEnabled="true" editable="true"> 
     <mx:columns> 
      <mx:DataGridColumn headerText="A" dataField="a" /> 
      <mx:DataGridColumn headerText="B" dataField="b" /> 
      <mx:DataGridColumn headerText="C" dataField="c" /> 
     </mx:columns> 
    </mx:DataGrid> 
    <mx:TextInput text="dfalsdfasdf" /> 
    <mx:DataGrid id="dg2" dataProvider="{src}" tabEnabled="true" editable="true"> 
     <mx:columns> 
      <mx:DataGridColumn headerText="A" dataField="a" /> 
      <mx:DataGridColumn headerText="B" dataField="b" /> 
      <mx:DataGridColumn headerText="C" dataField="c" /> 
     </mx:columns> 
    </mx:DataGrid> 
    </mx:VBox> 
</mx:Application> 

을 본질적으로,이 둘 사이의 텍스트 필드와 두 DataGrids를합니다. 첫 번째 그리드의 편집 가능한 마지막 셀에서 자연스럽게 탭하려면 먼저 텍스트 필드로 이동 한 다음 다른 탭 이벤트가 두 번째 DataGrid로 포커스를 설정합니다.

정확한 "DataGrid.rowCount"(3이되어야하지만 어떤 이유로 6을 읽음)를 얻지 못했기 때문에 "다소"기능적이라고했습니다. 이것이 거기에 dg.rowCount/2 체크가있는 이유입니다. 나는를 rowCount의 문제를 발견)

+1

참고. 그렇다면 * dg.editedItemPosition = {columnIndex : 0, rowIndex : 0} 같은 것을하십시오. * –

+0

안녕하세요 막시무스, 정말 고마워! 그게 정확히 내가 찾고 있던거야! – Markus

+1

기꺼이 봉사해야합니다.) 다른 사람들이 너에게 도움이되는 것이 무엇인지 알기 위해 대답을 받아들이는 것을 잊지 마라. –

0

,

는 희망이 전달하지만 당신을 이동 도움이 될 것입니다. rowCount는 그리드에있는 데이터의 양을 나타내지 않으며, 생성 된 행의 수를 나타냅니다. 그래서 데이터 그리드를 보면 각 행에 6 개의 행이 있음을 알 수 있습니다!

내가 dg.dataProvider.length를 사용하는 데이터의 적당한 양을 얻으려면 왜

다시 한 번 감사드립니다, 지금 완벽하게 작동합니다 ... 먹으 렴! 당신은 "탭으로 포장"을 수행하려는 경우 대상의 데이터 그리드의 * editedItemPosition의 *를 강제해야 할 수도 있습니다

마르쿠스

+0

AAAAAAAAAAAAH ** 머리를 두드리라. **. 고마워 마르쿠스 : P –