Docs
API

    • Config

    bbar

    Array

    Bottom bar.

     
    
bbar: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

    buttons

    Array

    Buttons bar

     
    
buttons: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

    cls

    String

    The 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

    Object

    Columns default properties.

     
    
defaults: {
  type: 'string',
  width: 100,
  editable: true,
  sortable: true
},

    events

    Array

    Form event handlers.

     
    
var form = new FancyForm({
  ...
  events: [{
    change: function(o){
      
    },
    scope: {}// not required
  }]
  ...
});

    footer

    Object

    Footer bar.

     
    
var form = new FancyForm({
  ...
  footer: {
    status: '* - Devices online per 100 inhabitants in 2015',
    source: {
      text: 'OECD',
      link: 'oecd.org'
    }
  },
  ...
});

    height

    Mixed

    Form height.

    If value is 'fit', height will be set to content.

     
    
height: 500,

    
height: 'fit',

    id

    String

    There are several ways to get link on grid object.
    One of which is to set id and than to use Fancy.getWidget('myForm').

     
    
new FancyForm({
  id: 'myGrid'
});

...
var form = Fancy.getWidget('myForm');

    i18n

    String

    Localization.

     
    
var Form = new FancyForm({
  title: 'Localization - German',
  i18n: 'ge',
  ...
});

    lang

    Object

    Localization.

     
    
var form = new FancyForm({
  title: 'Localization - German',
  lang: {
    paging: {
      of: 'von [0]',
      info: 'Zeilen [0] - [1] von [2]'
    }
  }
  ...
});

    method

    String

    The request method to use for form actions.

     
    
var form = new FancyForm({
  ...
  url: 'submit.php',
  params: {
    param1: 1,
    param2: 'string'
  },
  method: 'POST',
  ...
});
    GET

    modal

    Boolean

    It 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

    Object

    Extra form params for request.

     
    
var form = new FancyForm({
  ...
  url: 'submit.php',
  params: {
    param1: 1,
    param2: 'string'
  },
  method: 'POST',
  ...
});

    renderOuter

    Mixed

    renderOuter is alternative to renderTo.
    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

    Mixed

    Dom/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

    Boolean

    Enable light shadow.

     
    
new FancyForm({    
  renderTo: 'container',
  width: 690,
  height: 350,
  shadow: false,
  ...
    true

    subTBar

    Array

    subTBar is used as extra bar for grid's top when
    tbar is not enough. 

    
subTBar: [{
  type: 'button',
  text: 'Text',
  handler: function(){}
}],

    tbar

    Array

    Toolbar.

     
    
tbar: [{
  type: 'button',
  text: 'Add',
  action: 'add'
}],

    title

    String

    Form title text.

     
    
title: 'Form of statistics',

    theme

    String

    If you defined new theme, than property theme will enable it for form.

     
    
theme: 'my'

    url

    String

    The URL to use for form actions.

     
    
var form = new FancyForm({
  ...
  url: 'submit.php',
  params: {
    param1: 1,
    param2: 'string'
  },
  method: 'POST',
  ...
});

    width

    Mixed

    Form 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

    Boolean

    This param is used if grid is hidden on start and should be shown later.

    It does grid positioned absolute.
    It requires do not define renderTo. 

    
var grid = new FancyForm({
  window: true,
  modal: true,
....
});

grid.show();
    false