PDA

View Full Version : 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
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
How to get the title header container?

Check out the properties on the panel instance

psewt
2 Mar 2012, 8:36 AM
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
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
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:


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