How to add custom buttons into toolbar to Entity Grid Panel


#1

How can I add a custom button next to the default buttons in Entity Grid Panel?


#2

Pass a customActions configuration parameter. This will add your action to both EntityGridPanel toolbar & to the All actions menu. Inside action handler this is a action itself, so to access a EntityGridPanel instance use selector, for instance this.up('entitygridpanel').
Shortcut code sample:

{
  "cmdType": "showList",
  "cmdData": {
    "params": [{
	"entity": "tst_clob",
	"method": "select",
	"fieldList": [
		"code",
		"description",
		"text100",
		"text2"
	]
    }]
  },
  "customActions": [{
    "actionText": "Show total",
    "glyph": 0xf0ed, // font awesome character code
    "text":"ShowTotal",
    "handler": function(){
      let ePanel = this.up('entitygridpanel')
      $App.dialogInfo(`There is ${ePanel.store.totalCount} rows total`)
    }
  }]
}

#3

For deeper button bar customization, I am afraid, you would need something like

{
  "cmdType": "showList",
  "cmdData": {
    "params": [{
	"entity": "tst_clob",
	"method": "select",
	"fieldList": [
		"code",
		"description",
		"text100",
		"text2"
	]
  },
  cmpInitConfig: {
     afterInit: function() {
        var me = this;
        me.on('afterrender', function() {
          var button = {
            xtype: 'button',
            text: 'Text',
            handler: function toggleStatus( /** @type {Ext.Action} */ action) {
              // Do something
            }
          };

          var bbar = me.dockedItems.items[1];
          // Pick a position to insert a button
          // You may alter a button, remove a button, etc. here
          bbar.insert(2, button);

        }, this, {
          single: true
        });
      }
    }
}

#4

What I do not like much is the use of numeric code of symbol here:

"customActions": [{
    "actionText": "Show total",
    "glyph": 0xf0ed, // font awesome character code
    "text":"ShowTotal",
    "handler": function(){
      let ePanel = this.up('entitygridpanel')
      $App.dialogInfo(`There is ${ePanel.store.totalCount} rows total`)
    }
 }]

Also, you may use “iconCls” instead of “glyph” like that:

iconCls: 'fa fa-gear',

And event if you use “glyph”, note that there is “UB.core.UBUtil.glyphs” enum, so that you won’t need to manually find out the numeric code of symbol.

Also, not directly related to the question, but this line:

$App.dialogInfo(`There is ${ePanel.store.totalCount} rows total`)

won’t work in IE and Safari, at least by the current moment:
See https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/template_strings, compatiblity at the end of article.

If you care about IE or Safari, do not do that.