extjs - ヘッダーExtJのボタン

Question

'X'の代わりに'window'ヘッダーにいくつかのボタンを追加したい。 ドラッグ可能なプロパティを保存する必要があります！ 次のようになります。

Answer 1

toolsウィンドウの（Ext.Panel.Tool ）構成を指定できます！

tools:[{
    type:'refresh',
    tooltip: 'Refresh form Data',
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    type:'help',
    tooltip: 'Get Help',
    handler: function(event, toolEl, panel){
        // show help here
    }
}]

25個の定義済みボタンがありますが、独自にカスタマイズできます。

Answer 2

xtype：'header'要素を定義し、ウィンドウ/パネルのヘッ​​ダーをより正確にカスタマイズすることもできます。

        header: {
            xtype: 'header',
            titlePosition: 0,
            defaults: {
                margin: '0 10px'
            },
            items: [
                {
                    xtype: 'textfield',
                    value: "Test Search",
                    tooltip: "Search something",
                    width: 300
                },
                {
                    xtype: 'container',
                    flex: 1
                },
                {
                    xtype: 'button',
                    text: "Test Button",
                    tooltip: "Add something",
                    iconCls: 'add',
                    handler: Ext.bind(function() {
                        console.log('does something');
                    }, this)
                }
            ]
        }

今のところ私が見ることができる唯一の制限は、アイテムとして'->'要素を使用できないことですが、それらの完全なクラス名（つまり、Ext.toolbar.Fill）またはxtypeによる構成を使用することは可能です：'tbfill'。