View Full Version : Hiding Buttons while using the ToolbarReorderer Plugin

19 Dec 2013, 8:44 AM
Hey all,

I'm using the ToolbarReorderer plugin on the toolbar of a TabPanel.

1 of the buttons in the toolbar shouldn't be seen if the first tab is selected. If the second tab is selected the button should be visible.

This works fine unless someone reorders the buttons (which we need for sorting purposes on the data in the grids). Then the buttons become all sorts of wonky.

The code below is currently how I'm handling whether the button should be seen or not (and I fire the afterrender event if the tab is changed)

this.on('afterrender', function(panel) {
panelToolbar = panel.getTopToolbar();
var buttonArray = panelToolbar.findBy(function(comp, container) {
if (comp.text == "Name")
return true;
panel.getActiveTab().getId() == 'tab1'?buttonArray[0].hide():buttonArray[0].show();

Thoughts on how to get this to work? Thoughts on a better solution than what I currently have?

13 Jan 2014, 11:57 AM
How about have an afterrender listener on the button and set a reference to it on the tabpanel itself.

afterrender: function (btn) {
tabPanel.myButton = btn;

Then set a tabchange listener on the tabpanel that looks to see if the active tab is 'tab1' and show/hide the btn from that.

tabchange: function (tabPanel, tab) {
tabPanel.myButton.setVisible(tab.getId() === 'tab1');