10 Replies Latest reply on Mar 24, 2010 2:35 PM by cyber0897

    formItem direction: vertical, does not work... any ideas why??

    cyber0897 Level 1

      hey guys.... im basically trying to place my textbox right below my formItem label, and after some research i found out that i just need to add the layout="vertical" to the formItem...

       

      the code i have is

       

           for each(var item:Object in menuItems){
                var formItem:FormItem = new FormItem();
                for each(var category:Object in categories){
                     if(item.Type == category.Id){
                          formItem.label = category.DisplayName;
                          formItem.setStyle("labelStyleName", "formItemLabelLeft");
           //----------->          formItem.direction = "vertical";
      
                     }
                }
                var textArea:TextArea = new TextArea();
                textArea.text = item.Description;
                textArea.height = 50;
                formItem.addElement(textArea);
                menuForm.addChild(formItem);
           }
      

       

       

      any ideas??

        • 1. Re: formItem direction: vertical, does not work... any ideas why??
          cyber0897 Level 1

          so, anyone have any idea why my code wont work???

          • 2. Re: formItem direction: vertical, does not work... any ideas why??
            jsd99 Level 3

            Form labels are always placed to the left of their children.  The vertical/horizontal direction specifies what to do if the form item has multiple children.  It's the children that get laid out horiz or vert.

             

            Example:

             

             

            <mx:Form>

             

            <mx:FormItem direction="vertical" label="foo">

            <mx:TextArea text="loreum ispsum one" height="50" />

            <mx:TextArea text="loreum ispsum two" height="50" />

            </mx:FormItem>

             

            <mx:FormItem direction="horizontal" label="bar">

            <mx:TextArea text="loreum ispsum three" height="50" />

            <mx:TextArea text="loreum ispsum four" height="50" />

            </mx:FormItem>

            </mx:Form>

             

             

            results in the following screen:

            Screen shot 2010-03-24 at 11.17.38 AM.png

            1 person found this helpful
            • 3. Re: formItem direction: vertical, does not work... any ideas why??
              cyber0897 Level 1

              ohh... i c, so how would i go about doing what im trying to do in actionscript??

               

              i need the label on top and the children below the label.... and i need to do this purely in actionscript....

               

               

              right now i do some this like for follows..

               

                        var formItem:FormItem = new FormItem();
                        formItem.direction = "horizontal";
                        for each(var category:Object in categories){
                             if(item.Type == category.Id){
                                  formItem.label = category.DisplayName;
                                  formItem.setStyle("labelStyleName", "formItemLabelLeft");               
              
                             }
                        }
                        var textInput:TextInput = new TextInput();
                        var chkBox:CheckBox = new CheckBox();
                        
                        chkBox.id = repeatId.toString();
                        chkBox.label = "Repeat Menu";
                        chkBox.addEventListener(Event.CHANGE, repeatMenuChecked);
                        
                        
                        textInput.text = item.Description;
                        textInput.id = item.Id.toString();
              //          textInput.width = 100%;
                        textInput.height = 50;
                        textInput.addEventListener(TextOperationEvent.CHANGE, textInputChanged);
                        formItem.id = item.Id;
                        formItem.data = item;
              
                        formItem.addElement(textInput);
                        formItem.addElement(chkBox);
                        menuForm.addChild(formItem);
                        
                        repeatId++;
              

               

               

              do i need to create like a Vgroup or something of that sorts?? and add teh children to that?

              • 4. Re: formItem direction: vertical, does not work... any ideas why??
                jsd99 Level 3

                Yes, use a VBox (flex 3) or VGroup (flex 4).  Then just add the children in the order you want them displayed.

                1 person found this helpful
                • 5. Re: formItem direction: vertical, does not work... any ideas why??
                  cyber0897 Level 1

                  hmm... i tried doing that... but it seems as if it adds the children vertically.. but not the label and children...

                   

                  the code i chagned to

                   

                  var textInput:TextInput = new TextInput();
                  var chkBox:CheckBox = new CheckBox();
                  var vGroup:VGroup = new VGroup();
                  
                  vGroup.addElement(textInput);
                  vGroup.addElement(chkBox);
                            
                  formItem.addElement(vGroup);
                  menuForm.addChild(formItem);
                  

                   

                   

                  and it ends up being like the image i attached

                   

                  Screen shot 2010-03-24 at 2.31.53 PM.png

                   

                   

                  i need the checkbox and the text input below the "Express lunch (choose two items)" and "Tossed to order salad"

                   

                   

                  am i doing somehting wrong??

                  • 6. Re: formItem direction: vertical, does not work... any ideas why??
                    jsd99 Level 3

                    Don't use formItem.  It's just a container, it doesn't add any functionality to the form.  Just create the form, then add label "express lunch", text input, checkbox, label "tossed to order salad", text input, checkbox.

                    • 7. Re: formItem direction: vertical, does not work... any ideas why??
                      cyber0897 Level 1

                      i actually need to use the formItem... i have to do this part of my application in a form container... i assign the formItem with an id, which i later use multiple times to retrive data...

                       

                       

                      my application basically makes a call to the server, where it gets all the items and categories, which i use to populate the form dynamically, and when someone changes anything in the textboxes i have to call a function which then has to recognise which text field has changed and then update my array that is sent back to the server on save...

                       

                      hopefully that makes any sense

                       

                      so is there no way i could have the textfield below the label and expanded out all the way??

                      • 8. Re: formItem direction: vertical, does not work... any ideas why??
                        jsd99 Level 3

                        I still don't understand why you need a formItem.  It provides no functionality, it's purely for layout.  Just walk the form's children and find the values that you're interested in.


                        • 9. Re: formItem direction: vertical, does not work... any ideas why??
                          Peter deHaan Level 4

                          Not sure I understand the requirement to use a Form container, but if you want the easy solution, try using a FormHeading to show the labels instead of setting the FormItem label:

                           

                          <?xml version="1.0" encoding="utf-8"?>
                          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:mx="library://ns.adobe.com/flex/mx">
                             
                              <mx:Form>
                                  <mx:FormHeading label="Express Lunch (choose two items)" />
                                  <mx:FormItem direction="vertical">
                                      <s:TextInput text="Garden Vegetable" />
                                      <s:CheckBox label="Repeat Menu" />
                                  </mx:FormItem>
                                  <mx:FormHeading label="Tossed to Order Salad" />
                                  <mx:FormItem direction="vertical">
                                      <s:TextInput text="A Meal for rabbits" />
                                      <s:CheckBox label="Repeat Menu" />
                                  </mx:FormItem>
                              </mx:Form>
                             
                          </s:Application>

                           

                          Peter

                          • 10. Re: formItem direction: vertical, does not work... any ideas why??
                            cyber0897 Level 1

                            AHA!!! the formHeading worked like a champ!!!

                             

                            @jsd99: well the formItem actually holds some of the data that i use in later functions like id, it helps me recognise which dynamically created textbox is being edited, and which part of my global array i need to change the data for.... i dont know if im making any sence... but thank you very much for your help!!!

                             

                             

                            and peter.. thanks a lot!! i modified my code to look like below... and it worked exactly like what i needed it to do... again thanks a lot for your help guys...

                             

                                 for each(var item:Object in menuItems){
                                      var formItem:FormItem = new FormItem();
                                      var formHeading:FormHeading = new FormHeading();
                                      formItem.direction = "horizontal";
                                      for each(var category:Object in categories){
                                           if(item.Type == category.Id){
                                                //formItem.label = category.DisplayName;
                                                formHeading.label = category.DisplayName;
                                                formItem.setStyle("labelStyleName", "formItemLabelLeft");               
                            
                                           }
                                      }
                                      var textInput:TextInput = new TextInput();
                                      var chkBox:CheckBox = new CheckBox();
                                      var vGroup:VGroup = new VGroup();
                                      
                                      chkBox.id = repeatId.toString();
                                      chkBox.label = "Repeat Menu";
                                      chkBox.addEventListener(Event.CHANGE, repeatMenuChecked);
                                      
                                      
                                      textInput.text = item.Description;
                                      textInput.id = item.Id.toString();
                                      textInput.height = 50;
                                      textInput.addEventListener(TextOperationEvent.CHANGE, textInputChanged);
                                      formItem.id = item.Id;
                                      formItem.data = item;
                            
                                      vGroup.addElement(textInput);
                                      vGroup.addElement(chkBox);
                                      menuForm.addElement(formHeading);
                                      formItem.addElement(vGroup);
                                      menuForm.addChild(formItem);
                                      
                                      repeatId++;
                                 }