1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    10
    Vote Rating
    0
    timmc_basis is on a distinguished road

      0  

    Default Unanswered: Swap out tools in a panel header?

    Unanswered: Swap out tools in a panel header?


    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.
    Last edited by timmc_basis; 2 Oct 2012 at 1:17 PM. Reason: eta: removal?

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,593
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    10
    Vote Rating
    0
    timmc_basis is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,593
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

    Code:
    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();
            }
        });
    });

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    10
    Vote Rating
    0
    timmc_basis is on a distinguished road

      0  

    Default


    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. :-/

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,593
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread