Disabling individual buttons on a Flex ButtonBar control

By Peter deHaan On January 10, 2008 · 22 Comments

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.

Tagged with: enabled • getChildAt()

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

22 Responses to Disabling individual buttons on a Flex ButtonBar control

Moshe says:

January 12, 2008 at 6:51 am

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
peterd says:

January 12, 2008 at 11:14 am

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
Moshe says:

January 16, 2008 at 1:56 pm

Thanks Peter :)
Hagen says:

April 10, 2008 at 7:26 am

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
Peter deHaan says:

April 10, 2008 at 8:32 am

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
Hagen says:

April 11, 2008 at 1:56 am

Peter,

i have provided a bug request at adobe key: FB-12399.

best regards

Hagen
peterd says:

April 11, 2008 at 7:58 am

Hagen,

Thanks. I moved the bug to the SDK feature and added my vote.
http://bugs.adobe.com/jira/browse/SDK-15268

Peter
Hagen says:

April 14, 2008 at 1:45 am

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

Eddie says:

March 18, 2009 at 12:51 pm

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:

private function toggleButton():void {
   var colorArray:Array=["black", "black"];
   var whiteArray:Array=["white", "white"];
 
   for each(var i:Object in vsMainButtonBar.getChildren()){
       i.setStyle("fillColors", whiteArray);
   }
 
   var b3:ButtonBarButton = vsTeachButtonBar.getChildAt(vsTeach.selectedIndex) as ButtonBarButton;
   b3.setStyle("fillColors", colorArray);
}

Eddie says:

March 18, 2009 at 12:54 pm

Here is the additional items to work with the last post about changing the ButtonBar:

Eddie says:

March 18, 2009 at 12:56 pm

Here it is again (didn’t escape the mxml code last time):

<mx:ButtonBar dataProvider="{vsMain}" id="vsMainButtonBar"/>
<mx:ViewStack id="vsMain" change="toggleButton();" creationComplete="toggleMainButton();">

Phillip Molaro says:

April 14, 2009 at 12:42 pm

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!
Rodrigo says:

June 22, 2009 at 1:07 pm

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!

Peter deHaan says:

June 22, 2009 at 6:17 pm

Rodrigo,

How about something like the following (just add/remove whatever controls you want to enable/disable to the switch statement):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import flash.utils.getQualifiedClassName;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                var uic:UIComponent;
                var idx:uint;
                var len:uint = cnvs.numChildren;
                for (idx=0; idx<len; idx++) {
                    uic = cnvs.getChildAt(idx) as UIComponent;
                    switch (getQualifiedClassName(uic)) {
                        case "mx.controls::Label":
                        case "mx.controls::Text":
                        case "mx.controls::TextArea":
                        case "mx.controls::TextInput":
                            uic.enabled = !uic.enabled;
                            break;
                    }
                }
            }
        ]]>
    </mx:Script>
 
    <mx:VBox id="cnvs">
        <mx:TextInput id="ti" text="TextInput" />
        <mx:TextArea id="ta" text="TextArea" />
        <mx:DateField id="df" selectedDate="{new Date()}" />
        <mx:Label id="lbl" text="Label" />
        <mx:Text id="txt" text="Text" />
        <mx:ColorPicker id="cp" />
    </mx:VBox>
    <mx:Button id="btn" click="btn_clickHandler(event);" />
 
</mx:Application>

Peter

Rodrigo says:

June 23, 2009 at 9:41 am

Friend, thank you, thank you even!
Rodrigo says:

June 23, 2009 at 10:09 am

One more question, if it were to leave the contents of the text fields blank when you click on the button would be like?
Peter deHaan says:

June 23, 2009 at 4:10 pm

I haven’t tested this, but maybe try:
```
Object(uic).text = "";
```
Peter
Rodrigo says:

June 23, 2009 at 5:39 pm

Good friend you are right! It worked perfectly! Thank you very much
Oscar says:

August 11, 2009 at 12:46 am

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)?
- Peter deHaan says:
  
  August 11, 2009 at 6:53 am
  
  Oscar,
  
  Using the Halo ButtonBar control or the new Spark ButtonBar control?
  
  Peter
mindy says:

February 2, 2010 at 3:40 am

how does this work for spark button bar control?
- Peter deHaan says:
  
  February 2, 2010 at 8:12 am
  
  @mindy,
  
  The example is a bit out of date, but check out “Disabling specific buttons in a Spark ButtonBar control in Flex 4″.
  
  Peter