tbar

There are 4 bars in FancyForm.
They are: tbar, subTBar, 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.
subTBar is used as extra bar for grid's top when
tbar is not enough.

Example


tbar: [{
  type: 'button',
  text: 'Add',
  handler: function(){
    
  }
},{
  type: 'button',
  text: 'Delete',
  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

action

string

predefined handler on item click.

Values: add, remove.


{
  text: 'Add',
  action: 'add'
}

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: 'Cell',
  enableToggle: true,
  handler: function(b){
    b.toggle();
  }
},{
  text: 'Row',
  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.


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

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();
  }
...

grid.tbar[0].disable();

enable

()

Enable item.


grid.tbar[0].enable();

setPressed

(pressed: Boolean)

Toggle pressed state.


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

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

toggle

Toggle pressed state.


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

grid.tbar[0].toggle();