Buttons in header ExtJs

Question

I want to add some buttons in 'window' header, instead of 'X'. Draggable property must be saved! It should look like this:

Solution 1

You can specify the tools(Ext.Panel.Tool) config for the window!

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
    }
}]

There are 25 predefined buttons but you can customize your own.

Solution 2

It's also possible to define xtype: 'header' element and customize header of window/panel more precisely:

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

The only limitation I could see for now is inability to use '->' elements as items, but it's still possible to use their full class names (ie Ext.toolbar.Fill) or config by xtype: 'tbfill'.

Comments

[Oleg]

That's work great! But, I have new problem - I use xtype: 'button' in tools and button looks strange. Have you any idea about buttons style?

[A1rPun]

What do you mean by strange looking? tools:[{xtype:'button',text:'Oleg'}] works for me.

[A1rPun]

This answer was edited by @AshishLahoti but I removed the edits he made because it adds nothing to the answer.