Swap out tools in a panel header?

[timmc_basis]

I have a panel whose contents may be swapped out from time to time, and the tools in the panel's header must change along with the contents. There doesn't seem to be a way to ask for the tools to be rebuilt, or to add or insert tools at random.

The best approach I've come up with so far is to save off the existing collection of tools (just the close button, for now) when the panel is first created. Then, every time I need to update the header, I would rebuild a tools array from that + whatever new tools need to be there, then call .updateHeader(). Is there anything more idiomatic/future-proof than that?

ETA: For that matter, I can't figure out how to remove the existing tools.

[skirtle]

What about adding all the tools you might need then showing/hiding rather than adding/removing?

You might also find addTool useful:

http://docs.sencha.com/ext-js/4-1/#!...method-addTool

[timmc_basis]

Because I don't necessarily know what tools will be specified by the relying code.

[skirtle]

This does seem to be more complicated than it needs to be. Removing a tool is theoretically quite easy, you just destroy it, but removing it from all of the tools arrays is a bit of a pain.

Here's my attempt at a remove method. Given your requirements I've gone with a method to remove all tools as that's a bit easier than trying to remove specific tools.

Ext.define('MyApp.panel.Panel', {
    override: 'Ext.panel.Panel',

    clearTools: function() {
        var me = this,
            header = me.getHeader();

        if (header) {
            Ext.suspendLayouts();

            // The tools arrays seem a bit unreliable, so use a CQ instead
            Ext.each(header.query('tool'), Ext.destroy);

            // Clear both tools arrays
            header.tools = [];
            me.tools = [];

            me.updateHeader();

            Ext.resumeLayouts(true);
        }
    }
});

Ext.onReady(function() {
    var panel = Ext.create('Ext.panel.Panel', {
        height: 300,
        renderTo: Ext.getBody(),
        width: 300
    });

    Ext.create('Ext.button.Button', {
        renderTo: Ext.getBody(),
        text: 'Add Close Tool',
        handler: function() {
            panel.addTool({type: 'close'});
        }
    });

    Ext.create('Ext.button.Button', {
        renderTo: Ext.getBody(),
        text: 'Add Gear Tool',
        handler: function() {
            panel.addTool({type: 'gear'});
        }
    });

    Ext.create('Ext.button.Button', {
        renderTo: Ext.getBody(),
        text: 'Remove All Tools',
        handler: function() {
            panel.clearTools();
        }
    });
});

[timmc_basis]

Thanks, that seems to work!

...unfortunately, I hadn't realized until now that panel tools don't allow custom icons. I'm going to back off from this approach and put the buttons in the panel body after all. :-/

[skirtle]

I don't see why you can't use custom icons. You'll have to add extra entries to the list of allowed types and come up with suitable CSS but it doesn't strike me as much harder than any alternative approach.