Docs
API
  • bbar

    Array

    There are 4 bars in FancyGrid.
    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'
    }
    
    undefined

    disabled

    Boolean

    Disabling item.

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

    cls

    String

    Item css className.

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

    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');
      },
    
    undefined

    hidden

    Boolean

    If set to true than field is hidden.

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

    imageCls

    String

    Left side small button image cls.

    
    bbar: [{
      text: 'Button',
      imageCls: 'my-button'
    },{
    ...
    
    undefined

    menu

    Array

    Enables menu for button.

    
    bbar: [{
      type: 'button',
      text: 'Button',
      menu: [{
    	text: 'Text 1',
    	handler: function(){
    	  
    	}
      },{
    	text: 'Text 2',
    	handler: function(){
    	  
    	}
      }]
    },{
      type: 'button',
      text: 'Button 2',
      menu: [{
    	text: 'Text 1',
    	handler: function(){
    	  
    	}
      },{
    	text: 'Text 2',
    	handler: function(){
    	  
    	},
    	items: [{
    	  text: 'Text 1',
    	  handler: function(){
    	  
    	  }
    	},{
    	  text: 'Text 2',
    	  handler: function(){
    	  
    	  }
    	}]
      }]
    }],
    
    undefined

    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(){}
    }
    
    undefined

    text

    String

    item text

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

    tip

    String

    Text of tooltip for element.

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

    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(){}
    }
    
    undefined

    type

    String

    Item type.

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

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

    width

    Number

    Field width.
    If not set than field tries to auto-detect width.

    
    {
      type: 'button',
      text: 'Add',
      width: 100
    }
    
    undefined

    Methods

    disable

    ()

    Disable item.

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

    enable

    ()

    Enable item.

    
    grid.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);    
      }
    ...
    
    
    grid.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();
        grid.setTrackOver('cell', b.pressed);
      }
    ...
    
    
    grid.bbar[0].toggle();
    

    Default

    
    undefined