extjs 4 - как добавить кнопку в заголовок панели?

Question

у меня есть:

new Ext.Panel({ 
    title: 'Header',      
    hideCollapseTool: true, 
    collapsible: true, 
    collapsed: true, 
    renderTo: 'mywrap', 
    width: '100%', 
    height: 'auto', 
    ... 
} 

Как я могу заменить Header одну кнопку вся ширина/высота с висения и ▲ ▼ заголовка вместо названия?

as_is-as_to_be

Answer 1

Если я правильно понимаю, что вы хотите достичь вы можете сделать что-то вроде этого:

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 
}); 

working fiddle Проверьте это.

Если вы все еще хотите кнопку с высотой/шириной 100%, чтобы добавить Вы можете сделать что-то вроде этого:

var myPanel = Ext.create('Ext.panel.Panel', { 
    ... 
    title: '<button id="myButton" style="...">My header button</button>' 
    ... 
}); 

(не забудьте удалить заголовок панели отступы)

и добавить обработчик к нему через ExtJS, как этот

// Get Ext.dom.Element via Ext.dom.Element.get() method 
Ext.get('myButton').on('click', function() { 
    if(myPanel.getCollapsed()) 
     myPanel.expand(); 
    else 
     myPanel.collapse(); 
}); 

или JS, как это

document.getElementById('myButton').addEventListener('click', function() { 
    if(myPanel.getCollapsed()) 
     myPanel.expand(); 
    else 
     myPanel.collapse(); 
}); 

Проверьте это working fiddle.

Если вы хотите добавить несколько кнопок в свой заголовок, вы также можете использовать конфигурацию Ext.panel.Panel.tools.

И, конечно же, вы всегда можете переопределить Ext.panel.Header.