The following example shows how you can disable keyboard navigation in a Flex ComboBox control by extending the ComboBox class and overriding the protected keyDownHandler() method.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/16/disabling-keyboard-navigation-on-the-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="comps.*"
layout="vertical"
verticalAlign="top"
backgroundColor="white" >
<mx:Array id="arr">
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
</mx:Array>
<mx:Form>
<mx:FormItem label="MXML:">
<comps:MyComboBoxMXML id="comboBoxMXML"
dataProvider="{arr}" />
</mx:FormItem>
<mx:FormItem label="ActionScript:">
<comps:MyComboBoxAS id="comboBoxAS"
dataProvider="{arr}" />
</mx:FormItem>
</mx:Form>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/16/disabling-keyboard-navigation-on-the-combobox-control-in-flex/ -->
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override protected function keyDownHandler(event:KeyboardEvent):void {
// ignore
}
]]>
</mx:Script>
</mx:ComboBox>
/**
* http://blog.flexexamples.com/2008/07/16/disabling-keyboard-navigation-on-the-combobox-control-in-flex/
*/
package comps {
import flash.events.KeyboardEvent;
import mx.controls.ComboBox;
public class MyComboBoxAS extends ComboBox {
public function MyComboBoxAS() {
super();
}
override protected function keyDownHandler(event:KeyboardEvent):void {
// ignore
}
}
}
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/16/disabling-keyboard-navigation-on-the-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.containers.Form;
import mx.containers.FormItem;
import comps.*;
private var arr:Array;
private var myComboBoxMXML:MyComboBoxMXML;
private var myComboBoxAS:MyComboBoxAS;
private function init():void {
arr = [];
arr.push({label:"One"});
arr.push({label:"Two"});
arr.push({label:"Three"});
arr.push({label:"Four"});
arr.push({label:"Five"});
arr.push({label:"Six"});
arr.push({label:"Seven"});
arr.push({label:"Eight"});
arr.push({label:"Nine"});
arr.push({label:"Ten"});
myComboBoxMXML = new MyComboBoxMXML();
myComboBoxMXML.dataProvider = arr;
var formItem1:FormItem = new FormItem();
formItem1.label = "MXML:";
formItem1.addChild(myComboBoxMXML);
myComboBoxAS = new MyComboBoxAS();
myComboBoxAS.dataProvider = arr;
var formItem2:FormItem = new FormItem();
formItem2.label = "ActionScript:";
formItem2.addChild(myComboBoxAS);
var form:Form = new Form();
form.addChild(formItem1);
form.addChild(formItem2);
addChild(form);
}
]]>
</mx:Script>
</mx:Application>





0 Responses to “Disabling keyboard navigation on the ComboBox control in Flex”
Leave a Reply