bars

There are 3 bars in FancyForm.
They are: tbar, bbar, buttons.
Syntax is the same for all bars.
The main purpose of buttons is alternative for bbar.
When paging is enabled, bbar is busy.

Example


tbar: [{
  type: 'button',
  text: 'Submit',
  handler: function(){
    
  }
},{
  type: 'button',
  text: 'Clear',
  handler: function(){
    
  }
}],

Example: separator

To set separator between items use shortcut |


bbar: [{
  text: 'Text 1'
},'|',{
  type: 'button'
}],

Example: side

If to set 'side' element than all elements after it will be floated to right side.


bbar: ['side', {
  text: 'Clear'
},'|',{
  type: 'Submit'
}],

Params

cls

String

Item css className.


{
  text: 'Add',
  type: 'button',
  cls: 'my-button'
}

disabled

Boolean

Disabling item.


{
  text: 'Delete',
  type: 'button',
  disabled: true
}

enableToggle

Boolean

True to enable pressed/not pressed toggling.
If a toggleGroup is specified, this option will be set to true.


tbar: [{
  text: 'Cell',
  enableToggle: true,
  handler: function(b){
    b.toggle();
  }
},{
  text: 'Row',
  enableToggle: true,
  pressed: true,
  handler: function(b){
    b.toggle();
  }
...
false

handler

Mixed

item handler on item click


{
  type: 'button',
  text: 'Add',
  handler: function(){}
}

new FancyGrid({
  ...
  tbar: [{
    text: 'Button1',
    handler: 'button1Click'
  },{
    text: 'Button2',
    handler: 'button2Click'
  }],
  button1Click: function(){
    console.log('button1Click');
  },
  button2Click: function(){
    console.log('button2Click');
  },

pressed

Boolean

True to start pressed (only if enableToggle = true).


tbar: [{
  text: 'One',
  enableToggle: true,
  handler: function(b){
    b.toggle();
  }
},{
  text: 'Two',
  enableToggle: true,
  pressed: true,
  handler: function(b){
    b.toggle();
  }
...
false

style

Object

item style on case needed change default style.


{
  type: 'button',
  text: 'Add',
  style: {
    'float': 'left',
    'margin-left': '5px',
    'margin-right': '0px',
    'margin-top': '3px'
  },
  handler: function(){}
}

text

String

item text


{
  type: 'button',
  text: 'Add',
  handler: function(){}
}

tip

String

Text of tooltip for element.


{
  type: 'button',
  tip: 'Some info',
  text: 'Add',
  handler: function(){}
}

{
  type: 'number',
  tip: '{value}'
}

toggleGroup

String

The group toggle button is a member of (only 1 per group can be pressed).
If a toggleGroup is specified, enableToggle configuration will automatically be set to true.


bbar: [{
  text: 'One',
  toggleGroup: 'sel',
  handler: function(b) {
    b.setPressed(true);
  }
...

type

String

item type

Possible values: button, combo, number, segbutton, string, text.


{
  type: 'button',
  text: 'Add',
  handler: function(){}
}
button

Methods

disable

()

Disable item.


tbar: [{
  text: 'Disable',
  handler: function(b) {
    b.disable();
  }
...

form.tbar[0].disable();

enable

()

Enable item.


form.tbar[0].enable();

setPressed

(pressed: Boolean)

Toggle pressed state.


tbar: [{
  text: 'One',
  toggleGroup: 'sel',
  handler: function(b) {
    b.setPressed(true);    
  }
...

form.tbar[0].setPressed(false);

toggle

Toggle pressed state.


tbar: [{
  text: 'One',
  enableToggle: true,
  handler: function(b){
    b.toggle();
  }
...

form.tbar[0].toggle();