flex datagrid Tab键事件

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
?? ?<fx:Declarations>
?? ??? ?<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?? ?</fx:Declarations>
?? ?<fx:Script>
?? ??? ?
?? ??? ?<![CDATA[
?? ??? ?
?? ??? ?import mx.controls.Alert;
?? ??? ?
?? ??? ?import mx.collections.XMLListCollection;
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?private var xml:XML = <root><vo column1='A1' column2='B1' column3='C1' column4='D1'/>
?? ??? ?
?? ??? ?<vo column1='A2' column2='B2' column3='C2' column4='D2'/>
?? ??? ?
?? ??? ?<vo column1='A3' column2='B3' column3='C3' column4='D3'/></root>;
?? ??? ?
?? ??? ?[Bindable]
?? ??? ?
?? ??? ?private var dp:XMLListCollection = new XMLListCollection(xml.vo);
?? ??? ?
?? ??? ?[Bindable]
?? ??? ?
?? ??? ?private var text1:String = "";
?? ??? ?
?? ??? ?[Bindable]
?? ??? ?
?? ??? ?private var text2:String = "";
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?//------------------------- section 1 ----------------------
?? ??? ?
?? ??? ?private function firstKeyDown(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try {
?? ??? ?
?? ??? ?//click tab
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.TAB && event.shiftKey){
?? ??? ?
?? ??? ?end_1.setFocus();
?? ??? ?
?? ??? ?return;
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
?? ??? ?
?? ??? ?comp_2.setFocus();
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
?? ??? ?
?? ??? ?comp_4.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?}???????????????????????? ?
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?private function secondKeyDown(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try {
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
?? ??? ?
?? ??? ?comp_3.setFocus();
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
?? ??? ?
?? ??? ?comp_1.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?} ?
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?private function thirdKeyDown(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try {
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
?? ??? ?
?? ??? ?comp_4.setFocus();
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
?? ??? ?
?? ??? ?comp_2.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?} ?
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?private function fouthKeyDown(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try {?????????????????????? ?
?? ??? ?
?? ??? ?//click tab
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.TAB && !event.shiftKey){
?? ??? ?
?? ??? ?start_1.setFocus();
?? ??? ?
?? ??? ?return;
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
?? ??? ?
?? ??? ?comp_1.setFocus();
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
?? ??? ?
?? ??? ?comp_3.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?} ?
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?//~------------------------- section 1 end----------------------
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?//------------------------- section 2 ------------------------
?? ??? ?
?? ??? ?private function keydown11(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try {
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
?? ??? ?
?? ??? ?comp_22.setFocus();
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP
?? ??? ?
?? ??? ?||(event.keyCode == Keyboard.TAB && event.shiftKey)) {
?? ??? ?
?? ??? ?dataGrid.setFocus();
?? ??? ?
?? ??? ?dataGrid.editedItemPosition={columnIndex:dataGrid.columns.length-1,rowIndex:dataGrid.dataProvider.length-1};
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?private function keydown12(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try {
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
?? ??? ?
?? ??? ?comp_23.setFocus();
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
?? ??? ?
?? ??? ?comp_21.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?private function keydown13(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try {
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
?? ??? ?
?? ??? ?comp_24.setFocus();
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
?? ??? ?
?? ??? ?comp_22.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?private function keydown14(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try {
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN
?? ??? ?
?? ??? ?||(event.keyCode == Keyboard.TAB && !event.shiftKey)){
?? ??? ?
?? ??? ?dataGrid.setFocus();
?? ??? ?
?? ??? ?dataGrid.editedItemPosition={columnIndex:0,rowIndex:0};
?? ??? ?
?? ??? ?return;
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
?? ??? ?
?? ??? ?comp_23.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?private function keydownDataGrid(event:KeyboardEvent):void{
?? ??? ?
?? ??? ?try{
?? ??? ?
?? ??? ?var v:Object = dataGrid.editedItemPosition;
?? ??? ?
?? ??? ?var ti:TextInput = TextInput(dataGrid.itemEditorInstance);
?? ??? ?
?? ??? ?//tab
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.TAB){
?? ??? ?
?? ??? ?if(!event.shiftKey){
?? ??? ?
?? ??? ?if(v!=null && v.rowIndex ==dataGrid.dataProvider.length - 1 && v.columnIndex==dataGrid.columns.length-1){
?? ??? ?
?? ??? ?start_2.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}else{
?? ??? ?
?? ??? ?if(v!=null && v.rowIndex == 0 && v.columnIndex==0){
?? ??? ?
?? ??? ?end_2_1.setFocus()
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?if(event.keyCode == Keyboard.DOWN){
?? ??? ?
?? ??? ?if(v.rowIndex < dataGrid.dataProvider.length-1){
?? ??? ?
?? ??? ?v.rowIndex++;
?? ??? ?
?? ??? ?dataGrid.editedItemPosition = v;
?? ??? ?
?? ??? ?}else{
?? ??? ?
?? ??? ?comp_21.setFocus();
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}else if(event.keyCode == Keyboard.RIGHT){
?? ??? ?
?? ??? ?if(v.columnIndex < dataGrid.columns.length - 1){
?? ??? ?
?? ??? ?v.columnIndex++;
?? ??? ?
?? ??? ?dataGrid.editedItemPosition = v;????????????????????????????????????? ?
?? ??? ?
?? ??? ?} else {
?? ??? ?
?? ??? ?comp_21.setFocus();
?? ??? ?
?? ??? ?}????????????????????????? ?
?? ??? ?
?? ??? ?} else if(event.keyCode == Keyboard.UP){
?? ??? ?
?? ??? ?if(v.rowIndex==0){
?? ??? ?
?? ??? ?comp_24.setFocus();
?? ??? ?
?? ??? ?}else{
?? ??? ?
?? ??? ?v.rowIndex --;
?? ??? ?
?? ??? ?dataGrid.editedItemPosition = v;
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}else if(event.keyCode == Keyboard.LEFT){?????????????????????????????????? ?
?? ??? ?
?? ??? ?if(v.columnIndex == 0){
?? ??? ?
?? ??? ?comp_24.setFocus();?????????????????????????????????????? ?
?? ??? ?
?? ??? ?}else{
?? ??? ?
?? ??? ?v.columnIndex --;
?? ??? ?
?? ??? ?dataGrid.editedItemPosition = v;
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?} catch(e:Error) {
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?private function dataGridFocusIn(event:FocusEvent):void{
?? ??? ?
?? ??? ?try{
?? ??? ?
?? ??? ?var ti:TextInput = TextInput(dataGrid.itemEditorInstance);
?? ??? ?
?? ??? ?if(ti){
?? ??? ?
?? ??? ?text2 = ti.text;
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}catch(e:Error){
?? ??? ?
?? ??? ?trace(e.message);
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?]]>
?? ??? ?
?? ?</fx:Script>
?? ?
?? ?<mx:Panel title="Tab键; Shift+Tab; 方向键切换界面元素例子" verticalGap="20"
?? ??? ??? ? ?
?? ??? ??? ?? width="100%" height="100%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
?? ??? ?
?? ??? ?<mx:VBox width="100%" height="60" borderStyle="solid">
?? ??? ??? ?
?? ??? ??? ?<mx:HBox width="100%" height="20">
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="Section One 循环切换:" fontSize="13"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Spacer width="50"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="{text1}" fontSize="13" fontWeight="bold" color="0xC42B25"/>
?? ??? ??? ??? ?
?? ??? ??? ?</mx:HBox>
?? ??? ??? ?
?? ??? ??? ?<mx:HBox width="100%" height="100%">
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Button id="start_1" width="1" height="1" label="a" tabEnabled="true" tabIndex="0"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:TextInput id="comp_1" text="First" tabEnabled="true" tabIndex="1"
?? ??? ??? ??? ??? ??? ??? ? ?
?? ??? ??? ??? ??? ??? ??? ?? keyDown="firstKeyDown(event)" width="100" focusIn="{text1=comp_1.text}"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="->"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Button id="comp_2" label="Second" tabEnabled="true" tabIndex="2"
?? ??? ??? ??? ??? ??? ?? ?
?? ??? ??? ??? ??? ??? ??? keyDown="secondKeyDown(event)" focusIn="{text1=comp_2.label}"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="->"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Button id="comp_3" label="Third" tabEnabled="true" tabIndex="3"
?? ??? ??? ??? ??? ??? ?? ?
?? ??? ??? ??? ??? ??? ??? keyDown="thirdKeyDown(event)" focusIn="{text1=comp_3.label}"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="->"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:TextInput id="comp_4" text="Fouth" tabEnabled="true" tabIndex="4"
?? ??? ??? ??? ??? ??? ??? ? ?
?? ??? ??? ??? ??? ??? ??? ?? keyDown="fouthKeyDown(event)" width="100" focusIn="{text1=comp_4.text}"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Button id="end_1" width="1" height="1" label="b" tabEnabled="true" tabIndex="5"/>
?? ??? ??? ??? ?
?? ??? ??? ?</mx:HBox>
?? ??? ??? ?
?? ??? ?</mx:VBox>????? ?
?? ??? ?
?? ??? ?<mx:VBox width="100%" height="100%" borderStyle="solid">
?? ??? ??? ?
?? ??? ??? ?<mx:HBox width="100%" height="20">
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="Section Two 循环切换:" fontSize="13"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Spacer width="50"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="{text2}" fontSize="13" fontWeight="bold" color="0x21911D"/>
?? ??? ??? ??? ?
?? ??? ??? ?</mx:HBox>
?? ??? ??? ?
?? ??? ??? ?<mx:HBox width="100%" height="40">
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Button id="start_2" width="1" height="1" label="a" tabEnabled="true" tabIndex="10"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:TextInput id="comp_21" text="First" tabEnabled="true" tabIndex="11"
?? ??? ??? ??? ??? ??? ??? ? ?
?? ??? ??? ??? ??? ??? ??? ?? keyDown="keydown11(event)" width="100" focusIn="{text2=comp_21.text}"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="->"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Button id="comp_22" label="Second" tabEnabled="true" tabIndex="12"
?? ??? ??? ??? ??? ??? ?? ?
?? ??? ??? ??? ??? ??? ??? keyDown="keydown12(event)"? focusIn="{text2=comp_22.label}"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="->"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Button id="comp_23" label="Third" tabEnabled="true" tabIndex="13"
?? ??? ??? ??? ??? ??? ?? ?
?? ??? ??? ??? ??? ??? ??? keyDown="keydown13(event)" focusIn="{text2=comp_23.label}"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Label text="->"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:TextInput id="comp_24" text="Fouth" tabEnabled="true" tabIndex="14"
?? ??? ??? ??? ??? ??? ??? ? ?
?? ??? ??? ??? ??? ??? ??? ?? keyDown="keydown14(event)" width="100" focusIn="{text2=comp_24.text}"/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:Button id="end_2_1" width="1" height="1" label="b" tabEnabled="true" tabIndex="15"/>
?? ??? ??? ??? ?
?? ??? ??? ?</mx:HBox>
?? ??? ??? ?
?? ??? ??? ?<mx:DataGrid id="dataGrid" keyDown="keydownDataGrid(event)"
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ? tabEnabled="true" tabIndex="16" focusIn="dataGridFocusIn(event)"
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ? dataProvider="{dp}"
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ? editable="true">
?? ??? ??? ??? ?
?? ??? ??? ??? ?<mx:columns>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<mx:DataGridColumn dataField="@column1" width="100" editable="true" headerText="Col1"/>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<mx:DataGridColumn dataField="@column2" headerText="Col2" width="180" editable="true" textAlign="right"/>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<mx:DataGridColumn dataField="@column3" headerText="Col3" width="110" editable="true" textAlign="right"/>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<mx:DataGridColumn dataField="@column4" headerText="Col4" width="110" editable="true" textAlign="right"/>???? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?</mx:columns>
?? ??? ??? ??? ?
?? ??? ??? ?</mx:DataGrid>
?? ??? ??? ?
?? ??? ??? ?<mx:Button id="end_2_2" width="1" height="1" label="b" tabEnabled="true" tabIndex="17"/> ?
?? ??? ??? ?
?? ??? ?</mx:VBox>
?? ??? ?
?? ??? ?<mx:Text text="非循环切换比较简单，对于第一个和最后一个界面元素不需要进行特殊处理，这里就省略Demo" fontSize="12"/>
?? ??? ?
?? ?</mx:Panel>????? ?
</s:Application>

http://wmcai.blog.163.com/blog/static/480242008101224142851/