extjs 4 - パネルのヘッ​​ダーにボタンを追加するにはどうすればいいですか？

Question

私が持っている：

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

は、どのように私は、ヘッダー1つのボタンのホバーと全体の幅/高さと▲ヘッダー▼タイトルの代わりに置き換えることができますか？

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

をし、ハンドラを追加（パネル・ヘッダーのパディングを削除することを忘れないでください）この

のように、この

// 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のような、ExtJSのを経由してそれに

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

これをチェックするworking fiddle

ヘッダーにいくつかのボタンを追加する場合は、Ext.panel.Panel.tools configを使用することもできます。

もちろん、Ext.panel.Headerを上書きすることもできます。