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 …
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:
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
Another way to change the ButtonBar within the Building phase is to have a function that is called when a ViewStack is created and changed (this assumes that the ButtonBar is being used with a ViewStack).
This code will change the currently selected button background to black and all other buttons to white when the ViewStack is created and every time the ViewStack changes:
Here is the additional items to work with the last post about changing the ButtonBar:
Here it is again (didn’t escape the mxml code last time):
FYI, I was trying to do disbale a single button in my button bar by calling an init() function on my App’s creation complete event. When I do that I get an error that the index is out of bounds.
So then I tried to call that code on my buttonBar’s creation complete event. No error, but my button isn’t disabled as desired.
However, the updateComplete event seems to do the trick. If I call my code to disable my button on the ButtonBar’s updateComplete, then my single button is disabled. Also, calling that code from another test button also works as it does in your example.
Finally, while the ButtonBarButton is a valid class, it doesn’t come up via auto completion in the Flex 3 IDE. Is this a bug or is this one of those classes that Adobe doesn’t intend for the user to touch? Just curious.
Thx for the info. Once again your blog as taught me even more Flex trickery and made my apps better!
Hello, the very good example! One question, I could disable all the fields of text that is inside a Canvas using getChildAt? Thanks for your help!
Rodrigo,
How about something like the following (just add/remove whatever controls you want to enable/disable to the
switch
statement):Peter
Friend, thank you, thank you even!
One more question, if it were to leave the contents of the text fields blank when you click on the button would be like?
I haven’t tested this, but maybe try:
Peter
Good friend you are right! It worked perfectly! Thank you very much
Hi Peter,
Is there a way to replace the button-component in the buttonbar with a new button-class (one that’s created in catalyst)?
Oscar,
Using the Halo ButtonBar control or the new Spark ButtonBar control?
Peter
how does this work for spark button bar control?
@mindy,
The example is a bit out of date, but check out “Disabling specific buttons in a Spark ButtonBar control in Flex 4”.
Peter