Docs

API

Config
- barHeight
- bbar
  - allowToggle
  - cls
  - data
  - disabled
  - displayKey
  - editable
  - emptyText
  - enableToggle
  - events
  - format
  - handler
  - hidden
  - id
  - imageCls
  - inputHeight
  - itemCheckBox
  - leftTpl
  - leftWidth
  - max
  - menu
  - min
  - minListWidth
  - multiSelect
  - multiToggle
  - pressed
  - spin
  - step
  - subSearch
  - text
  - tip
  - toggleGroup
  - type
  - valueKey
  - vtype
  - width
- buttons
  - allowToggle
  - cls
  - data
  - disabled
  - displayKey
  - editable
  - emptyText
  - enableToggle
  - events
  - format
  - handler
  - hidden
  - id
  - imageCls
  - inputHeight
  - itemCheckBox
  - leftTpl
  - leftWidth
  - max
  - menu
  - min
  - minListWidth
  - multiSelect
  - multiToggle
  - pressed
  - spin
  - step
  - subSearch
  - text
  - tip
  - toggleGroup
  - type
  - valueKey
  - vtype
  - width
- cls
- defaults
- draggable
- events
  - init
  - set
  - scope
- footer
  - status
  - source
    - text
    - link
- height
- id
- i18n
- items
  - column
  - data
    proxy
    
    reader
    
    root
    
    url
  - defaults
  - disabled
  - displayKey
  - editable
  - emptyText
  - events
  - format
    edit
    
    inputFn
    
    read
    
    write
  - itemCheckBox
  - inputHeight
  - inputLabel
  - inputWidth
  - label
  - labelAlign
  - labelWidth
  - listItemTpl
  - leftTpl
  - leftWidth
  - max
  - min
  - minListWidth
  - multiSelect
  - multiToggle
  - name
  - showPassTip
  - spin
  - step
  - subSearch
  - type
  - value
  - valueKey
  - vtype
  - width
- lang
  - date
    read
    
    write
    
    edit
    
    today
    
    startDay
    
    days
    
    months
    
    am
    
    pm
    
    AM
    
    PM
    
    ok
    
    cancel
  - decimalSeparator
  - loadingText
  - sourceText
  - thousandSeparator
- method
- modal
- params
- renderOuter
- renderTo
- scrollable
- shadow
- subTitle
  - cls
  - style
  - text
- subTBar
  - allowToggle
  - action
  - cls
  - data
  - disabled
  - displayKey
  - editable
  - emptyText
  - enableToggle
  - events
  - format
  - handler
  - hidden
  - id
  - imageCls
  - inputHeight
  - itemCheckBox
  - leftTpl
  - leftWidth
  - max
  - menu
  - minListWidth
  - multiSelect
  - multiToggle
  - paramsMenu
  - paramsText
  - pressed
  - spin
  - step
  - subSearch
  - text
  - tip
  - toggleGroup
  - type
  - valueKey
  - vtype
  - width
- tbar
  - allowToggle
  - action
  - cls
  - data
  - disabled
  - displayKey
  - editable
  - emptyText
  - enableToggle
  - events
  - format
  - handler
  - hidden
  - id
  - imageCls
  - inputHeight
  - itemCheckBox
  - leftTpl
  - leftWidth
  - max
  - menu
  - minListWidth
  - multiSelect
  - multiToggle
  - paramsMenu
  - paramsText
  - pressed
  - spin
  - step
  - subSearch
  - text
  - tip
  - toggleGroup
  - type
  - valueKey
  - vtype
  - width
- title
  - cls
  - style
  - text
  - tools
    handler
    
    text
- theme
  - name
  - config
    barHeight
    
    bottomScrollHeight
    
    panelBorderWidth
    
    titleHeight
- url
- width
- window
Fields
- button
- checkbox
- combo
- date
- hidden
- html
- line
- number
- password
- radio
- segbutton
- set
- string
- switcher
- tab
- textarea
Events
- init
- set
Methods
- clear
- destroy
- each
- get
- getItem
- getSubTitle
- getTitle
- getValues
- hide
- hideBar
- nextTab
- on
- once
- prevTab
- remove
- set
- setActiveTab
- setHeight
- setSubTitle
- setTitle
- setWidth
- show
- showat
- showBar
- submit
- un
- valid

html

HTML field type

Example


items: [{
  type: 'html',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join("")
},{
...

Properties

cls

^String

The CSS class that will be added to field.
It is used for custom styling field.


items: [{
  type: 'html',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join(""),
  cls: 'field-info'
},{
...
}]

events

^Array

Set event handler to field.


...
items: [{
  type: 'html',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join(""),
  events: [{
    change: function(){
      
    }
  }]
},{
...

name

^String

Name of field over which it is possible to get value of field.


...
items: [{
  type: 'html',
  name: 'info',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join("")
},{
...

type

^String

Type of field (value - html).


{
  type: 'html',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join("")
}

value

^Boolean

Value of field.


items: [{
  type: 'html',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join("")
...

Methods

get

^():Array

Returns value of field.


field.get();

set

^{(value: String)}

Sets value of field.


field.set('Kia Sportage' + '
...');

setWidth

^{(value: Number)}

Set new field width.


field.setWidth(400);

Events

change

^{(field, value)}

Change field value event.


items: [{
  type: 'html',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join("")
  events: [{
    change: function(){
      
    },
    scope: {}//not required
  }]
...