1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    33
    Answers
    1
    Vote Rating
    1
    psewt is on a distinguished road

      0  

    Default Answered: How to add a button into the panel title header?

    Answered: How to add a button into the panel title header?


    How to add a button into the panel title header right after the title?

  2. Code:
    var panel = new Ext.panel.Panel({
        renderTo : document.body,
        width    : 400,
        height   : 400,
        title    : 'Test'
    });
    
    panel.header.add({
        xtype : 'button',
        text  : 'Test'
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The header is basically a container using hbox layout (vbox if header is on left or right). Therefore you can use add/insert/remove on that header component. There is no config to do this, you will have to do it manually after the header is created.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    33
    Answers
    1
    Vote Rating
    1
    psewt is on a distinguished road

      0  

    Default


    How to get the title header container?

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by psewt View Post
    How to get the title header container?
    Check out the properties on the panel instance
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    33
    Answers
    1
    Vote Rating
    1
    psewt is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Check out the properties on the panel instance
    I've already checked it and I thought it's headerCt, but it's not. If you know the property name post it here.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    var panel = new Ext.panel.Panel({
        renderTo : document.body,
        width    : 400,
        height   : 400,
        title    : 'Test'
    });
    
    panel.header.add({
        xtype : 'button',
        text  : 'Test'
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    33
    Answers
    1
    Vote Rating
    1
    psewt is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Code:
    var panel = new Ext.panel.Panel({
        renderTo : document.body,
        width    : 400,
        height   : 400,
        title    : 'Test'
    });
    
    panel.header.add({
        xtype : 'button',
        text  : 'Test'
    });
    Is it possible to align the buttons to the left, right after the title?

  9. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Use insert instead of add
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #9
    Ext Premium Member
    Join Date
    May 2010
    Posts
    18
    Vote Rating
    0
    MarkusL is on a distinguished road

      0  

    Exclamation


    Note: this does not work, if the panel is to be a child item of a container (i.e. the renderTo property is empty), because then panel is not rendered upon creating it.

    In this case add the buttons in a render-event handler instead.

    If the panel is collapsible, you'll have to use insert, starting with index 1.

  11. #10
    Sencha User castitas's Avatar
    Join Date
    Sep 2011
    Location
    US
    Posts
    116
    Answers
    3
    Vote Rating
    3
    castitas is on a distinguished road

      0  

    Default


    Ditto above. Unfortunately, the alignment is still a problem. I did this:
    Code:
            obj.header.add([{
                xtype: 'button',
                text : 'HI'
            },{
                xtype: 'component',
                flex: 1
            }])
    flex: 1 will put it about halfway, 5 three-quarters. I had to go to about 18 to get it where I wanted it.

    Edit: Changing the alignment to left will probably fix the centering issue
    word