Question

I have a problem that has been driving me nuts. I create a Form dynamically in Flex using the following code:

private function init():void {
            //Dynamically create form based on profiles
            for each(var role:AclRoleDTO in _profiles) { 
                //Create form item
                var fi:FormItem = new FormItem();
                fi.label = role.name;

                //Create checkbox
                var cbx:CheckBox = new CheckBox();
                cbx.id = "role_"+role.id.toString();
                cbx.label = role.description;
                cbx.width = 250;
                cbx.selected = true;

                //Add Checkbox for form item
                fi.addChild(cbx);
                profileForm.addChild(fi);
            }

            //Add save button
            var fib:FormItem = new FormItem();
            var btn:Button  = new Button();
            btn.name    = "Save";
            btn.label   = "Save";
            btn.id      = "saveButton";

            btn.addEventListener(MouseEvent.CLICK, onSubmitClicked);

            fib.addChild(btn);

            profileForm.addChild(fib);
        }

This works fine and creates a Form with FormItems that include CheckBoxes based on the available profiles + a save button to save these profiles.

However, when a user clicks on the save button to save the profiles, I use the following method to retrieve the selected boxes but the function only recognizes the last added CheckBoxes as a CheckBox…

private function onSubmitClicked(event:MouseEvent):void {
            var formElements:Array = profileForm.getChildren();
            var roleIds:ArrayCollection = new ArrayCollection();
            var i:int = 0;
            var j:int = 0;

            //Parse the entire form
            for (i; i < formElements.length; i++) {

                if (formElements[i] is FormItem) {
                    var formItem:FormItem = formElements[i];
                    var itemElements:Array = formItem.getChildren();

                    for (j;j<itemElements.length;j++) {

                        //If form item is a checkbox, check if the box is checked!
                        if (itemElements[j] is CheckBox) {
                            var tmpBox:CheckBox = itemElements[j];

                            if (tmpBox.selected) {
                                //random stuff
                            }
                        }
                    }
                }
            }

            //Send event with roleIds!
            //More random stuff

        }

I have tried all sorts of things to make sure that the loop works properly and it does: it loops through the proper amount of FormItem elements and retrieves the proper amount of childrenElements. It just doesn’t recognize any child as a CheckBox other than when looping through the last FormItem that was added. If I use flash.utils.getQualifiedClassName(itemElements[j]) to find out what the other FormItem children are it returns an empty string.

What am I doing wrong?

Answer 1

Here is working code for your problem:

        private function onSubmitClicked(event:MouseEvent):void
        {
            var selectedRoles:ArrayCollection = new ArrayCollection();

            var formItems:Array = rolesForm.getChildren();

            for (var i:int = 0; i < formItems.length; i++)
            {
                var formItem:FormItem = formItems[i];
                var formItemElements:Array = formItem.getChildren();
                for each (var control:UIComponent in formItemElements)
                {
                    if (control is CheckBox)
                    {
                        var tempBox:CheckBox = control as CheckBox;

                        if(tempBox.selected)
                            selectedRoles.addItem(tempBox);
                    }
                }
            }
        }