DHTMLX Touch documentation

Form controls:types & attributes

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}
]}

form_button

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 }
]}

calendar

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 }
]}

checkbox

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"}},
]}

combo

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
    • id - (string) the identification name of the option
    • value - (string) the value of the option
{ 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" }
                                                                                ]}
]}

counter

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"}
]}

radio

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
    • label - (string) the text label of the radio button
    • value - (string) the value of the radio button
{ 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" }
								        ] }
]}

list

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
    • id - (string) the identification name of the option
    • value - (string) the value of the option
{ 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" }]}
]}

text

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"}
]}

toggle

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"}
]}