Ext JS 4 – Plugin to Add Icons to a Panel Header

Recently in my app I had multiple grid panels that needed icons added to the header, where the title goes. Instead of duplicating the code in multiple places, I created a simple plugin that I could use on any panel anywhere in my application.

Here is the code of the plugin. It’s really simple, but helps keep my grid/panel code cleaner. Gist can be found here Panel Header Extra Icons, version 1.

And example usage of a grid config with the plugin:

{
	xtype: 'grid',
	title: 'My Grid Title',
	columns : [
	],
	plugins: [{
		ptype: "headericons",
		headerButtons : [
			{
				xtype: 'button',
				iconCls: 'icon-page-white-excel',
				scope: this,
				handler: this.onExportToExcel
			}
		]
	}]
}

And here is a screenshot, that shows two different panel headers that I have. One with one icon and one with two.
Screenshot of Icons added to Panel Header

Updated 03/22/2013
Per comments, I updated the plugin a little bit. I also had my own changes that I hadn’t updated here… Here is the updated plugin. Feedback??? Gist can be found here https://gist.github.com/2770422.

Version Info: Ext JS 4.1.1

Advertisements

12 comments

  1. Nice and practical plugin!
    My suggestion however would be to add the ability to place the buttons arbitrarily in a position.
    I did:
    Ext.define(‘Ext.ux.panel.header.ExtraIcons’, {
    extend: ‘Ext.AbstractPlugin’,
    alias: ‘plugin.headericons’,
    alternateClassName: ‘Ext.ux.PanelHeaderExtraIcons’,

    iconCls: ”,
    insertPosition: undefined,

    headerButtons: [],

    init: function(panel) {
    this.panel = panel;

    this.callParent();

    panel.on(‘afterrender’, this.onAddIcons, this);
    },

    onAddIcons :function () {
    this.header = this.panel.getHeader();
    console.log(this.header);
    this.header.insert(this.insertPosition || this.header.items.length,this.headerButtons);
    }
    });

    So you can pass it a position (the collapse icons looks out of place if you have a collapsible panel)

    Thanks
    J.

  2. It would be better to create an interceptor and do this before render to speed up rendering time, as this will call a refresh of the layout.

    1. If you look at the source code for Ext.panel.Header, you will see that dependingon what you put in your panel config your header will have the following items:

      [icon] [title (flex=1) [tools]

      So, you can try the following:

      plugins: [{
        ptype: 'headericons',
        headerButtons: [{
           xtype: 'button',
           iconCls: 'icon-page-white-excel',
           index: 1,
           scope: this,
           handler: this.onExportToExcel
       }]
      }]
      

      Hopefully what will happen is the button will be added after the icon and before the title, and is therefore left aligned.

    1. Sure, they are just regular buttons. Get a reference to them as you would any other button (for example by xtype or itemId) and you can call show/hide as needed.

      1. Thanks for quick reply. I’m still newbie on this.

        The problem is I use Ext.getCmp(‘button_id’) but return me undefined.

        I can get plugin by Ext.getCmp(‘plugin_id’).

        Here is my settings in headerButtons[]

        xtype: ‘button’,
        text:’text’,
        itemId: button_id’,
        margin:’0 0 0 10′,
        padding: ‘5px’,
        ui:’black-button’,
        scope: me,
        hidden: true,
        handler: function () {
        console.log(‘button click’);
        me.some_function();
        }

        Wish to get this button as a button component then be able to use setVisible(true/false), or other solutions

        Get the init config string then set hidden to false is not working either.

        Jony

    1. Yes, the Ext.getCmp(‘button_id’) is called after the button is created.

      Just find solution and works for both plugin and the way in the link you provide

      var myHeader = myGrid.getHeader();
      var btn = myHeader .down(‘#button_id’);
      var btnEl = myHeader .down(‘#button_id’).getEl();

      if(btn.isVisible()) //btn.isHidden()
      {
      btnEl.hide();
      }
      else
      {
      btn.show(); // remove this will align left, i need align right
      btnEl.show();// remove this will only work first time
      }

      There are somethings weird ( button and button element need to be set to show at same time) but already can make it work.

      For getting the component in the plugin, should get parent(header) first then look for child not directly get it by id

      Thanks a lot for the plugin, it works great.

      Jony

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s