Continuing on the theme of NumericStepper examples, the following example shows how you can set the text color for a disabled Flex NumericStepper control by setting the disabledColor
style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="enabled:"> <mx:CheckBox id="checkBox" selected="true" /> </mx:FormItem> <mx:FormItem label="disabledColor:"> <mx:ColorPicker id="colorPicker" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:NumericStepper id="numericStepper" enabled="{checkBox.selected}" disabledColor="{colorPicker.selectedColor}" /> </mx:Application>
View source is enabled in the following example.
You can also set the disabledColor
style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> NumericStepper { disabledColor: red; } </mx:Style> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="enabled:"> <mx:CheckBox id="checkBox" selected="true" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:NumericStepper id="numericStepper" enabled="{checkBox.selected}" /> </mx:Application>
Or, you can set the disabledColor
style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/25/setting-the-text-color-on-a-disabled-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ColorPickerEvent; private function colorPicker_change(evt:ColorPickerEvent):void { numericStepper.setStyle("disabledColor", evt.color); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="enabled:"> <mx:CheckBox id="checkBox" selected="true" /> </mx:FormItem> <mx:FormItem label="disabledColor:"> <mx:ColorPicker id="colorPicker" change="colorPicker_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:NumericStepper id="numericStepper" enabled="{checkBox.selected}" /> </mx:Application>