Custom toolbar buttons best practices.

[jonathansimmons]

I'm looking for some direction in how to best program the toolbar for my app.

Currently I'm creating a toolbar and all it's relevant buttons along with my main viewport. When the app starts I hide all the buttons. Then using the each cards "activate" listener and the setVisible() function to show/hide the relevant buttons as I need them.

This seems to work but it's been buggy and before I go to much further I'd like to see what others are doing.

For those curious my show hides code is something like this:

if (mainWrapper.Header.items.items[0].hidden == true) {
    mainWrapper.Header.items.items[0].setVisible(true)
}
if (mainWrapper.Header.items.items[1].hidden == false) {
    mainWrapper.Header.items.items[1].setVisible(false)
}

EDIT:
After some digging I found that I needed to use .isHidden() rather than just hidden which seems to have fixed any glitches I was seeing. I'd still love to hear anyone suggestions if they know a better way.

[eyepoker]

if you put id's on your buttons you can use the show() and hide() methods on them, like:

Ext.getCmp('button_one').hide();

After that, my approach would be to not bother about checking if something is hidden or not. I would write a function to handle the visibility of all of the buttons where the very first thing it would do is to loop through an array of button id's and hide() everything. After that, I'd show what needs to be shown. For example:

function setAllButtons(){
     // first hide everything
     var btnIds = ['button-1','button-2','button-3','button-4','button-5','button-6','button-7'];
      for (var i=0;i<btnIds.length;i++){
           Ext.getCmp(btnIds[i]).hide();
      }
       // next show only what is needed
      var currentPanel = rootPanel.getActiveItem().getId();
      if (currentPanel == 'panel-1'){
            Ext.getCmp('button-1').show();
            Ext.getCmp('button-2').show();
      } else if (currentPanel == 'panel-2'){
            Ext.getCmp('button-6').show();
            Ext.getCmp('button-7').show();
      }
      // ... etc...
}