In this section you will find full definition of all the controls which can be used in form.
Before individual element description, some common information concerned with all the elements.
Common feature. Any form control has parameter 'sameLine'(boolean) which answers for the control placement.
The default value is 'false': the control will be placed in a new row, under all the existing controls.
'true' value places control with the previous one in the same row .
{ view:"form", id:"topForm", data:[{ type:"text", name:"field_b", sameLine:true, label: 'Arrival', value: "Guatemala", position: "label-left", inputWidth: 250, labelWidth: 100}
]}
A normal button.
name - (string) the identification name of the control. Used for program control calling
value - (string) the button's text
width - (integer) the width of the button
align - (left, right or center) the alignment of the text within the control
{ view:"form", id:"topForm", data:[{type:"from_button", name: "findButton", value: 'Find flight', align:"center", width: 300 }
]}
A control area that contains label and pop-up calendar.
name - (string) the identification name of the control. Used for program control calling
label - (string) the text label of the control
labelWidth - (integer) the width of the label
labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{type:"calendar", name: "field_f", label: 'Date', labelAlign: "left", labelWidth: 100 }
]}
A check box.
name - (string) the identification name of the control. Used for program control calling
label - (string) the text label of the control
value - (boolean:true/false or 0/1) the initial value of the control (the default value is 0 - check box is not checked)
position - (label-left, label-right) the position of the label relative to the check box
labelWidth - (integer) the width of the label
labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{ type:"checkbox", name: "field_j", label:"find hotels", labelWidth: 150, value: 1, position: "label-right"}},
]}
A combo box.
name - (string) the identification name of the control. Used for program control calling
label - (string) the text label of the control
value - (string) the id of the initial option
y_count (integer)- the number of the select options
inputWidth - (integer) the width of the input field
labelWidth - (integer) the width of the label
align - (left, right or center) the alignment of the selected value within the defined width
labelAlign - (left, right or center) the alignment of the label within the defined width
data - specifies select options of the control
{ view:"form", id:"topForm", data:[{ type:"combo",name: "field_m", label: 'Combo', value:"1", y_count:"3", data:[
{ id:"1", value:"One" },
{ id:"2", value:"Two" },
{ id:"3", value:"Three" }
]}
]}
A control area which contains a label and a counter.
name - (string) the identification name of the control. Used for program control calling
label - (string) the text label of the control
value - (integer) the initial value of the control
step - (integer) the difference between two successive values of the control
min - (integer) the minimum value of the control
max - (integer) the maximum value of the control
width - (integer or “auto”) the width of the field which represents the current value
labelWidth - (integer) the width of the label
position - (label-left, label-right) the position of the label relative to the field which represents the current value
labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{ type:"counter", name:"field_c", label: 'Quantity', step: 10, width: "auto", value: 150, min: 100, max: 200, labelWidth: 100, position: "label-left", labelAlign: "left"}
]}
A block of the radio buttons (can contain only one radio button).
name - (string) the identification name of the control. Used for program control calling
value - (string) the initial value of the control (sets the value of the button which will be checked initially)
position - (label-left, label-right) the position of the labels relative to the radio buttons
labelWidth - (integer) the width of the labels
labelAlign - (left, right or center) the alignment of the labels within the defined width
data - specifies radio buttons of the control
{ view:"form", id:"topForm", data:[{ type:"radio", name:"field_l", position: "label-left", labelWidth: 110, labelAlign: "left", value:"a2", data:[
{ label:"option 1", value: "a1" },
{ label:"option 2", value: "a2" }
] }
]}
A dropdown list.
name - (string) the identification name of the control. Used for program control calling
label - (string) the text label of the control
value - (string) the id of the initial option
y_count (integer)- the number of the select options
inputWidth - (integer) the width of the input field
labelWidth - (integer) the width of the label
align - (left, right or center) the alignment of the selected value within the defined width
labelAlign - (left, right or center) the alignment of the label within the defined width
data - specifies select options of the control
{ view:"form", id:"topForm", height: 400, data:[{ name: "field_e", label: 'Type', value: "1", y_count:"3", align: "right", labelAlign: "right", data:[
{ id:"1", value:"One" },
{ id:"2", value:"Two" },
{ id:"3", value:"Three" }]}
]}
A text input area which contains a label and a text input field.
name - (string) the identification name of the control. Used for program control calling
label - (string) the text label of the control
value - (string) the inputted text
position - (label-left, label-right) the position of the label relative to input field
inputWidth - (integer) the width of the input field
labelWidth - (integer) the width of the label
align - (left, right or center) the alignment of the input field within the defined width
labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{type:"text", name:"field_a", label: 'from', value: "Moscow", position: "label-left", inputWidth: 250, labelWidth: 100, align: "center", labelAlign: "center"}
]}
A control area that contains label and a toggle (left and rigth buttons).
name - (string) the identification name of the control. Used for program control calling
options - (string array) the text labels of the buttons
label - (string) the text label of the control
value(s) - (string (string array)) the value(s) which the button(s) will return
width(s) - (integer(integer array) the width of the button(s)
align(s) - (left, right or center) the alignment of the button(s) text within the defined width
position - (label-left, label-right) the position of the label relative to the toggle
labelWidth - (integer) the width of the label
labelAlign - (left, right or center) the alignment of the label within the defined width
{ view:"form", id:"topForm", data:[{ type:"toggle", name: "field_g", options: ["Roundtrip","Oneway"], label: "label", values: ["left", "right"], widths: [150, 80], aligns: ["right", "left"], position: "label-right", labelWidth: 70, labelAlign: "left"}
]}