extjs 4 - 如何在面板标题中添加按钮？

Question

我有：

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

如何用悬停和▲标题▼而不是标题替换整个宽度/高度的标题一个按钮？

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 config。

当然，您可以随时覆盖Ext.panel.Header。