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>
<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/