The following example shows how you can disable individual buttons on a ButtonBar control in Flex by using the getChildAt() method and enabled property on the returned button instance.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/10/disabling-individual-buttons-on-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
ButtonBar {
buttonStyleName: myCustomButtonStyleName;
}
.myCustomButtonStyleName {
cornerRadius: 0;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.buttonBarClasses.ButtonBarButton;
private function toggleButton(idx:uint, selected:Boolean):void {
var b3:ButtonBarButton = buttonBar.getChildAt(idx) as ButtonBarButton;
b3.enabled = selected;
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object label="Button" />
<mx:Object label="ButtonBar" />
<mx:Object label="ColorPicker" />
<mx:Object label="ComboBox" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="Button enabled:">
<mx:CheckBox id="ch1"
selected="true"
click="toggleButton(0, ch1.selected);" />
</mx:FormItem>
<mx:FormItem label="ButtonBar enabled:">
<mx:CheckBox id="ch2"
selected="true"
click="toggleButton(1, ch2.selected);" />
</mx:FormItem>
<mx:FormItem label="ColorPicker enabled:">
<mx:CheckBox id="ch3"
selected="true"
click="toggleButton(2, ch3.selected);" />
</mx:FormItem>
<mx:FormItem label="ComboBox enabled:">
<mx:CheckBox id="ch4"
selected="true"
click="toggleButton(3, ch4.selected);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ButtonBar id="buttonBar"
dataProvider="{arr}"
itemClick="lbl.text = event.label;" />
<mx:Label id="lbl" />
</mx:Application>
View source is enabled in the following example.
Hi,
I really found this website as a valuable resource but I think since you add the search functionality it is hard to find what you are looking for. I liked it much more in its previous version where you listed all the control and you could pick the example that illustrate this particular control. Right now when I am searching for combobox for example I am getting a lot of non-relevant examples.
I appreciate your effort
Moshe,
You can find the tag archive at http://blog.flexexamples.com/tags/. I removed it from the right column since it was taking up way too much space and throwing the rest of the formatting off.
Peter
Thanks Peter :)
Hi,
the example works great. Is there a way to enable/disable items within the building phase of the component? I tried this but without any results …
var buttonBarItemsArr:Array = [ {label:'item1', enabled:false}, {label:'item2', enabled:true} ]; myButtonBar.dataProvider = buttonBarItemsArr;Thanks Hagen
Hagen,
Not that I know of (but that isn’t saying much — you’d have better luck asking on FlexCoders). There may be a way to extend the ButtonBar class and add this functionality in somewhere.
You could do this if you were using a ViewStack as a data provider though:
<mx:ButtonBar id="buttonBar2" dataProvider="{viewStack}" /> <mx:ViewStack id="viewStack"> <mx:VBox label="One" /> <mx:VBox label="Two" enabled="false" /> <mx:VBox label="Three" enabled="false" /> <mx:VBox label="Four" /> </mx:ViewStack>Feel free to file a bug/enhancement request in the public Flex bug base though (http://bugs.adobe.com/flex/). Heck, if you post the bug number here, I’ll vote for the bug. :)
Peter
Peter,
i have provided a bug request at adobe key: FB-12399.
best regards
Hagen
Hagen,
Thanks. I moved the bug to the SDK feature and added my vote.
http://bugs.adobe.com/jira/browse/SDK-15268
Peter
Hi Peter,
thanks for moving the bug at bugs.adobe.com! It was my first report, so i’m not so familar with the adobe-interface.
Putting all the good staff together, i have build up a smal ‘Customised ButtonBar Example’. Using a extended version of the ButtonBar component and custom events the user are able to enable/disable ButtonBar ‘childs’. You can find the application and the source code here:
http://www.newbit.org/flexexamples/CustomButtonBarExample/bin/CustomButtonBarExample.html
Ok, that’s it.
Hagen