-
Config
- barHeight
-
bbar
- bbarHeight
-
buttons
- buttonsHeight
- cls
- defaults
- draggable
-
events
-
footer
- height
- id
- i18n
-
items
- column
-
data
- defaults
- disabled
- displayKey
- editable
- emptyText
- events
-
format
- itemCheckBox
- inputHeight
- inputLabel
- inputWidth
- label
- labelAlign
- labelWidth
- listItemTpl
- leftTpl
- leftWidth
- max
- min
- minListWidth
- multiSelect
- multiToggle
- name
- showPassTip
- spin
- step
- subSearch
- tabIndex
- tip
- type
- value
- valueKey
- vtype
- width
-
lang
-
date
- method
- modal
- params
- renderOuter
- renderTo
- scrollable
- shadow
-
subTitle
-
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
- subTBarHeight
-
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
- tbarHeight
-
title
Config
bbar
ArrayBottom bar.
bbar: [{ type: 'button', text: 'Text', handler: function(){} }],
buttons
ArrayButtons bar
buttons: [{ type: 'button', text: 'Text', handler: function(){} }],
cls
StringThe CSS class to add to this element.
It needs to be careful with it.
If form is rendered in panel(if you are using title, bars, footer) than it is added to panel.
In other case it is added to form.cls: 'my',
defaults
ObjectColumns default properties.
defaults: { type: 'string', width: 100, editable: true, sortable: true },
events
ArrayForm event handlers.
var form = new FancyForm({ ... events: [{ change: function(o){ }, scope: {}// not required }] ... });
footer
ObjectFooter bar.
var form = new FancyForm({ ... footer: { status: '* - Devices online per 100 inhabitants in 2015', source: { text: 'OECD', link: 'oecd.org' } }, ... });
height
MixedForm height.
If value is
'fit'
, height will be set to content.height: 500,
height: 'fit',
id
StringThere are several ways to get link on grid object. One of which is to set
id
and than to useFancy.getWidget('myForm')
.
new FancyForm({ id: 'myGrid' }); ... var form = Fancy.getWidget('myForm');
i18n
StringLocalization.
var Form = new FancyForm({ title: 'Localization - German', i18n: 'ge', ... });
lang
ObjectLocalization.
var form = new FancyForm({ title: 'Localization - German', lang: { paging: { of: 'von [0]', info: 'Zeilen [0] - [1] von [2]' } } ... });
method
StringThe request method to use for form actions.
var form = new FancyForm({ ... url: 'submit.php', params: { param1: 1, param2: 'string' }, method: 'POST', ... });
GET modal
BooleanIt enables modal for grid.
It requires do not define renderTo and set window.
var grid = new FancyForm({ window: true, modal: true, .... }); grid.show();
false params
ObjectExtra form params for request.
var form = new FancyForm({ ... url: 'submit.php', params: { param1: 1, param2: 'string' }, method: 'POST', ... });
renderOuter
MixedrenderOuter
is alternative torenderTo
.
The only difference is that widget renders not in container but fills containers.
It helps to avoid using extra dom element as container.<div id="container"></div> ... new FancyForm({ renderOuter: 'container', width: 690, height: 350, ...
<div id="container"></div> ... new FancyForm({ renderOuter: document.querySelector('#container'), width: 690, height: 350, ...
renderTo
MixedDom/id, where to render grid.
<div id="container"></div> ... new FancyForm({ renderTo: 'container', width: 690, height: 350, ...
<div id="container"></div> ... new FancyForm({ renderTo: document.querySelector('#container'), width: 690, height: 350, ...
<div id="container"></div> ... new FancyForm(document.querySelector('#container'), { width: 690, height: 350, ...
shadow
BooleanEnable light shadow.
new FancyForm({ renderTo: 'container', width: 690, height: 350, shadow: false, ...
true subTBar
ArraysubTBar
is used as extra bar for grid's top when
tbar
is not enough.subTBar: [{ type: 'button', text: 'Text', handler: function(){} }],
tbar
ArrayToolbar.
tbar: [{ type: 'button', text: 'Add', action: 'add' }],
title
StringForm title text.
title: 'Form of statistics',
theme
StringIf you defined new theme, than property theme will enable it for form.
theme: 'my'
url
StringThe URL to use for form actions.
var form = new FancyForm({ ... url: 'submit.php', params: { param1: 1, param2: 'string' }, method: 'POST', ... });
width
MixedForm width.
If width is not set than form width become responsive.
If value is
'fit'
, width will be set to content.width: 400,
height: 'fit',
window
BooleanThis param is used if grid is hidden on start and should be shown later.
It does grid positioned absolute.
It requires do not definerenderTo
.var grid = new FancyForm({ window: true, modal: true, .... }); grid.show();
false -
date