bbar

Array

There are 4 bars in FancyForm.
They are: tbar, subTBar bbar, buttons.
Syntax is almost 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


bbar: [{
  type: 'button',
  text: 'Text 1',
  handler: function(){
    
  }
},{
  type: 'button',
  text: 'Text 2',
  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.


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

disabled

Boolean

Disabling item.


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

cls

String

Item css className.


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

enableToggle

Boolean

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


bbar: [{
  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({
  ...
  bbar: [{
    text: 'Button1',
    handler: 'button1Click'
  },{
    text: 'Button2',
    handler: 'button2Click'
  }],
  button1Click: function(){
    console.log('button1Click');
  },
  button2Click: function(){
    console.log('button2Click');
  },

hidden

Boolean

If set to true than field is hidden.


bbar: [{
  type: 'number',
  id: 'employee',
  hidden: true,
  value: 1
},{
...
}]

pressed

Boolean

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


bbar: [{
  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.


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

form.bbar[0].disable();

enable

()

Enable item.


form.bbar[0].enable();

hide

()

Hide field.


bbar: [{
  type: 'string',
  value: 'DB_TABLE'
...

grid.bbar[0].hide();

setPressed

(pressed: Boolean)

Toggle pressed state.

Values: add.


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

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

show

()

Show field if it was hidden.


bbar: [{
  type: 'string',
  value: 'DB_TABLE',
  hidden: true
...

grid.bbar[0].show();

toggle

()

Toggle pressed state. It is used only for button type.

Values: add.


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

form.bbar[0].toggle();

Default


undefined