ExtJS Toolbar button highlite

Question

Iam design menu in ExtJs using Ext.Toolbar,

var ToolBar = new Ext.Toolbar({
            id: 'ToolBar',
            renderTo: 'divtoolbar',
            items: [
                    { xtype: 'spacer', width: 50 },
                    { xtype: 'tbbutton', text: 'Home', handler: function () { window.location = '@Url.Content("~/Home/Home/")'; } },
                    { xtype: 'tbseparator' },
                    { xtype: 'tbbutton', text: 'Calendar', handler: function () { window.location = '@Url.Content("~/calendar/eventCalendar/")'; } },
                    { xtype: 'tbseparator' },
                    { xtype: 'tbbutton', text: 'Locations' }
]

............ how to change or highlite clicked tbbutton

thanks in advance

Abdel Raoof Olakara Abdel Raoof Olakara · Accepted Answer · 2011-04-28T10:56:05

You need to make use of the addClass method available with the button. Create a CSS style for the visited button and call addClass method in handler. Here is an example:

  handler:  function(b,e) {
     this.addClass('className');
  }

But in your case, I see that you are navigating away from the page. In such cases you will have to store the visited buttons in a cookie or use HTML5 storage.

I wonder why you are making a multipage ExtJS application and not following the single page approach?

ExtJS Toolbar button highlite

1 Answers