How to add a button into the panel title header?

**psewt** · 1 Mar 2012 8:55 AM

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

mitchellsimoens

Code:

var panel = new Ext.panel.Panel({
    renderTo : document.body,
    width    : 400,
    height   : 400,
    title    : 'Test'
});

panel.header.add({
    xtype : 'button',
    text  : 'Test'
});

**mitchellsimoens** · 1 Mar 2012 1:49 PM

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.

**psewt** · 2 Mar 2012 7:19 AM

How to get the title header container?

**mitchellsimoens** · 2 Mar 2012 7:21 AM

Originally Posted by psewt

How to get the title header container?

Check out the properties on the panel instance

**psewt** · 2 Mar 2012 8:36 AM

Originally Posted by mitchellsimoens

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.

**mitchellsimoens** · 2 Mar 2012 8:43 AM

Code:

var panel = new Ext.panel.Panel({
    renderTo : document.body,
    width    : 400,
    height   : 400,
    title    : 'Test'
});

panel.header.add({
    xtype : 'button',
    text  : 'Test'
});

**psewt** · 5 Mar 2012 7:37 AM

Originally Posted by mitchellsimoens

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?

**mitchellsimoens** · 5 Mar 2012 7:39 AM

Use insert instead of add

**MarkusL** · 23 Aug 2012 8:09 AM

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.

**castitas** · 29 Aug 2012 8:14 AM

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

How to add a button into the panel title header?

Thread Tools

Search Thread

Display

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

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