1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    thirumalaikumar is on a distinguished road

      0  

    Default How to add button/link to a title bar of the Panel

    How to add button/link to a title bar of the Panel


    Hi,

    I have a wizard like component. The last panel is the Summary Panel , which will have summary of each step as Panel inside it. I have to provide a edit button at the title bar of each panel which will lead to the corresponding step in the wizard. Is there any way to do it in ExtJS?

    Thanks,

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      1  

    Default


    Hi,
    you can use 'tools' config of panel to add a button onto title bar of panel.
    http://docs.sencha.com/ext-js/3-4/#!...anel-cfg-tools

    For example:-
    Code:
    var panel = new Ext.Panel({
        title: 'Title', 
        width: 300, 
        height: 200,
        tools: [{ 
            id: 'gear',
            handler: function(e, toolEl, panel, tc){
                menu.show(toolEl, 'tr-br?');     
            }
        }]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    thirumalaikumar is on a distinguished road

      0  

    Default


    Hi Sword-it,

    Thanks for your solution.
    Can I remove the icon and have a button/link with label "Edit" ?

    Thanks,

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    56
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    I created a really simple plug-in to do this, b/c I needed to add a button to a few panel title bars. The plugin looks like this:

    PHP Code:
    Ext.define('Ext.ux.panel.header.ExtraIcons', {
        
    extend'Ext.AbstractPlugin',
        
    alias'plugin.headericons',
        
    alternateClassName'Ext.ux.PanelHeaderExtraIcons',
        
    iconCls'',
        
    headerButtons: [],
        
    init: function(panel) {
            
    this.panel panel;
            
    this.callParent();
            
    panel.on('render'this.onAddIconsthis);
        },
        
    onAddIcons :function () {
            
    this.header this.panel.getHeader();
            
    this.header.add(this.headerButtons);
       }
    }); 
    And the usage looks like this, as part of the panel config:
    PHP Code:
                    plugins: [{
                        
    ptype"headericons",
                        
    headerButtons : [
                            {
                                
    xtype'button',
                                
    iconCls'icon-page-white-excel',
                                
    scopethis,
                                
    handlerthis.onExportToExcel
                            
    }
                        ]
                    }] 
    Regardless, the plugin shows how simple it is to add buttons to the title bar.

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Location
    Pune
    Posts
    1
    Vote Rating
    0
    atruptoneatma is on a distinguished road

      0  

    Default


    but this is at right hand position i want at left hand side sir

  6. #6
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Tools have an 'align' config option, 'left' or 'right' (default).
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    56
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    Sorry to come back to the plugin that I wrote, but it might work for you. I added an "index" config to the plugin, so you should be able to add the item at index 0, or 1 or whatever works for you.

    You can find the updated plugin at https://gist.github.com/aghuddleston/2770422 and a related blog post http://ahlearns.wordpress.com/2012/0...-panel-header/

    Looking at the source code for Ext.panel.Header, you can see that depending on what you put in your panel config, your header will have the items:
    [icon][title (has flex=1)][tools]

    So, using the plugin like so, might work (but I haven't tested it):
    PHP Code:
    plugins: [{
        
    ptype"headericons",
        
    headerButtons : [{
            
    xtype'button',
            
    iconCls'icon-page-white-excel',
            
    index1,
            
    scopethis,
            
    handlerthis.onExportToExcel
        
    }]
    }] 

  8. #8
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    4
    Vote Rating
    0
    romankuzmik is on a distinguished road

      0  

    Default


    Simple and works! Thanks, mate, for sharing.

  9. #9
    Sencha Premium Member
    Join Date
    Dec 2009
    Location
    Rhode Island
    Posts
    223
    Vote Rating
    21
    dmulcahey will become famous soon enough dmulcahey will become famous soon enough

      3  

    Default


    Another solution... The Panel header is a container and you can add items to it as such.


  10. #10
    Sencha User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    fullej is on a distinguished road

      0  

    Default


    For what it's worth, the solution provided by dmulcahey is exactly what I needed. Very clean and simple.