extjs 4 - how to add button into panel header? - extjs

Question

I have:
new Ext.Panel({
title: 'Header',
hideCollapseTool: true,
collapsible: true,
collapsed: true,
renderTo: 'mywrap',
width: '100%',
height: 'auto',
...
}
How can I replace header one button the entire width/height with hover and ▲ Header ▼ instead of title?
as_is-as_to_be

Answer 1

If I correctly understand what you want to achieve you can do something like this:
Ext.create('Ext.panel.Panel', {
border: true,
bodyStyle: {
padding: '10px'
},
collapsible: true,
hideCollapseTool: true,
html: 'Some data',
renderTo: Ext.getBody(),
title: '▲ Header ▼',
titleAlign: 'center',
titleCollapse: true
});
Check this working fiddle.
If you still want to add button with height / width 100% you can do something like this:
var myPanel = Ext.create('Ext.panel.Panel', {
...
title: '<button id="myButton" style="...">My header button</button>'
...
});
(do not forget to remove panel header padding)
and add handler to it via ExtJS, like this
// Get Ext.dom.Element via Ext.dom.Element.get() method
Ext.get('myButton').on('click', function() {
if(myPanel.getCollapsed())
myPanel.expand();
else
myPanel.collapse();
});
or JS, like this
document.getElementById('myButton').addEventListener('click', function() {
if(myPanel.getCollapsed())
myPanel.expand();
else
myPanel.collapse();
});
Check this working fiddle.
If you want to add some buttons to your header you can also use Ext.panel.Panel.tools config.
And ofcourse you can always overrite Ext.panel.Header.