Ext.require([ 'Ext.tab.*', 'Ext.window.*', 'Ext.tip.*', 'Ext.layout.container.Border' ]); Ext.onReady(function(){ var win, button = Ext.get('show-btn'); button.on('click', function(){ if (!win) { win = Ext.create('widget.window', { title: 'Layout Window with title after tools', header: { titlePosition: 2, titleAlign: 'center' }, closable: true, closeAction: 'hide', width: 600, minWidth: 350, height: 350, tools: [{type: 'pin'}], layout: { type: 'border', padding: 5 }, items: [{ region: 'west', title: 'Navigation', width: 200, split: true, collapsible: true, floatable: false }, { region: 'center', xtype: 'tabpanel', items: [{ // LTR even when example is RTL so that the code can be read rtl: false, title: 'Bogus Tab', html: '

Window configured with:

header: {\n    titlePosition: 2,\n    titleAlign: "center"\n},\ntools: [{type: "pin"}],\nclosable: true
' }, { title: 'Another Tab', html: 'Hello world 2' }, { title: 'Closable Tab', html: 'Hello world 3', closable: true }] }] }); } button.dom.disabled = true; if (win.isVisible()) { win.hide(this, function() { button.dom.disabled = false; }); } else { win.show(this, function() { button.dom.disabled = false; }); } }); });