View Full Version : Window and toolbar and borders

29 Nov 2010, 4:41 AM

I want to display a toolbar at the top of the browser window. To do this I do something like this:

ToolbarWindow = Ext.extend( Ext.Window, {
layout : 'fit',
plain : true,
border : false,
resizable : false,
draggable : false,
closable : false,

initComponent: function(config) {
this.items = {};
this.tbar = [{ xtype : 'buttongroup',
title : 'Tools',
defaults: {
scale : 'large',
iconAlign : 'top'
items : [{ text : 'Test', handler : function() { alert('XXX'); }, icon: 'test.png' }]

ToolbarWindow.superclass.initComponent.call(this, config);

fitToBodyWidth : function () {


toolbarWindow = new ToolbarWindow();
toolbarWindow.anchorTo( Ext.getBody(), 'tl-tl' );
Ext.EventManager.onWindowResize( toolbarWindow.fitToBodyWidth, toolbarWindow );

This works to the point that there's a toolbar at the top of the window which always fills the whole body width. However, there's a nasty border around the toolbar. The border comes from the window, it has css classes like "x-window-tl" attached to it.
My question: How can I make this border go away? Or if that's not possible how can I create my toolbar without the need for an Ext.Window?

29 Nov 2010, 5:01 AM
Use an Ext.Panel with floating:true instead of an Ext.Window.

29 Nov 2010, 5:17 AM
Thanks for your answer! I had to add an additional renderTo: Ext.getBody() and a call to setPosition(0,0); after render. After this it worked beautifully!