4 posts from 2006

DataGridをeditableで指定した場合、itemRendererのデータを編集することが出来る。
その場合、key操作にて編集中のフォーカス移動が可能となる。
編集中のカラムを変更する方法だが大きく分けて、mouseclick、tab、enterの三つがある。
(tabとenterにはShiftを同時に併用できる)
それぞれの操作に関して以下のイベントがどの順番でブロードキャストされるのか調べてみた

・focusIn         
・focusOut      
・itemFocusIn              
・itemFocusOut
・keyDown
・keyFocusChange
・keyUp
・itemEditBegin
・itemEditBeginning
・itemEditEnd
・activate
・deactivate

// ------------------------------------------------
//  mouseClickの場合
// -------------------------------------------------

#DataGrid自体にFocusがないとき

　1.　activate
　2.  focusIn
  3.  itemEditBigining
  4.  itemEditBigin
  5.  focusOut
  6.  focusIn
  7.　itemFocusIn

#DataGridからFocusが外れるとき
　
  1.  itemEditEnd(reason:other)
　2.  itemFocusOut
  3.  focusIn
  4.  deactivate
  5.  focusOut

#DataGridにFocusがあるとき

　1.　itemEditEnd(reason:other)
　2.　itemFocusOut
　3.　focusIn
　4.　itemEditBigining
　5.　itemEditBigin
　6.　focusOut
　7.　focusIn
　8.　itemFocusIn

※MouseClickの場合、itemEditBiginingのリスナー内で、event.preventDefault()を記述すればでフォーカスがあたるのを制御できる

// ------------------------------------------------
//  enterを押下した場合
// -------------------------------------------------
　
#DataGridにFocusがあるとき

　1.　itemEditEnd(reason:newRow)
　2.　itemFocusOut
　3.　itemEditBigining
　4.　keyDown
　5.　itemEditBigin
　6.　focusIn
　7.　itemFocusIn
　8.　keyUp

　　※DataGrid内にフォーカスが無い場合Enterでのkey操作は無効。また、最後のカラムまできた場合、フォーカスがDataGrid外にでることはない

// ------------------------------------------------
//  tabを押下した場合
// -------------------------------------------------

 #DataGridにFocusがあるとき

　1.　keyDown
　2.　keyFocusChange
　3.　itemEditEnd(reason:newColumn) or　(reason:newRow)
　4.　itemFocusOut
　5.　itemEditBigining
　6.　itemEditBigin
　7.　focusIn
　8.　itemFocusIn
　9.　keyUp

 #DataGridにFocusがないとき

　1.　activate
　2.　focusIn
　3.　keyUp
　4.　itemEditBigin
　5.　focusOut
　6.　focusIn
　7.　itemFocusIn

 #DataGridからFocusが外れるとき

　1.　keyDown
　2.　keyFocusChange
　3.　focusOut
　4.　focusIn
　5.　itemEditEnd-reason: other
　6.　itemFocusOut
　7.　deactivate
　8.　focusOut


またtabの操作にはブラウザごとに微妙に挙動が違ったりしました。
僕はkey操作にて行ごとに編集可否判定を行って、次のフォーカスがあたる場所を制御する処理をitemEditEndのハンドラ内において制御していたのですが、上記のブラウザの挙動の違いではまってしまいました。


ちなみに僕のようにkey操作においてフォーカス制御をする場合、DataGridのプロパティeditedItemPositionを上書き、またはItemEditBiginingEnvetをdispatchすると対象の行にフォーカスがいきます。