Building complex forms

Problem

How to build a complex form?

Solution

As form inherits from layout, you are allowed to place various elements into it for building a complex form.
To avoid potential errors you should know the following:

  • positioning
    1. The inherited parameters cols and rows. They allow to set any position of elements. You can specify any number of such parameters (as in a usual layout).
    2. The form's parameter elements (defines collection of form elements) is an alias for the layout's parameter rows underwent some changes:
      • You can specify elements just once (rows an many times as you wish).
      • The default border of the elements block is 'clean' (for cols and rows blocks - 'line'). So, when defining 'cols' and 'rows' blocks, remember about border. To hide it - just set type:'clean'.
    3. Form's methods setValues() and getValues() can be applied just to elements for which setValue() and getValue() methods are defined (controls and 'Calendar').
    4. The inherited parameter width and height. They will allow to set the width (height) of cell in cols(rows) blocks. inputWidth sets the width of a certain control.

      view:"form",height:260, id:"myform", elements:[
                 { type: "clean",
      		cols:[
      		{ view:"richselect", label: 'from', value: 1, id:'from', popup:"cities", width:280},
                      { view:"richselect", label: 'to', id:'to', value: 3, popup:"cities", inputWidth:270}
       	   ]},
      	   { view:"toggle", id:'way', options: ["Roundtrip","Oneway"], width: 240, align: "left" },
       	   { type: "clean",
      		cols:[
                      { view:"checkbox", label:"find hotels", width:165, labelWidth: 100, labelAlign: "left", position: "label-right" },
                      { view:"checkbox", sameLine: true, label:"find car here", labelWidth: 102, width:200},
      		{ view:"button", type:"form", label: 'Find flight', align:"center", inputWidth: 140, className: "form_search_btn" }
                 ]}
      ]
  • adding elements defined out of form to form collection (it will allow to set(get) their values along with form controls).
    1. First of all, just elements for which the methods getValue() and setValue() are defined, can be added to form collection.
    2. Use the following scheme for adding:

      $$('form_id').elements["name_in_form_collection"]=$$("id_of_element")// 'name_in_form_collection' is any name under which the element will be stored in form's collection 
      //for example:
      $$("myform").elements.["list_element"] = $$('mylist');

Related sample: ui/view/07_full_sample.html