View Full Version : [FXED-682] ExtJS Window strange behavior with a specific combination of properties

3 Mar 2010, 1:32 PM
Ext version tested:

Ext 3.1.1

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

FF3 (firebug 1.5.2 installed)

Operating System:

Windows 7 x64


Create a viewport with a border layout. Then open up a new Ext.Window with a FormPanel inside it. The Window should have its header constrained, be movable, and have defaultButton set to a field in the FormPanel. Then drag the window to the very right of the screen. You will be able to drag it outside of the border layout. In Firefox 3, the window becomes 'stuck' and you can't move it anymore. In IE8, you can continue dragging it all over the place.

Test Case:

This code is executable in Firebug, assuming you have all the necessary ExtJS includes.

// form that goes in the window
var form = {
xtype: 'form',
items: [ { id: 'field', xtype: 'textfield', fieldLabel: 'Test' }]

// create the viewport
new Ext.Viewport({
layout: 'border',
items: { region: 'center' }

// create and show the movable window
new Ext.Window({
title: 'Test Window',
width: 400,
height: 400,
draggable: true,
constrainHeader: true,
defaultButton: 'field',
items: [ form ]

Steps to reproduce the problem:

Run the above code.
Drag the window to the very right.

The result that was expected:

The window should be constrained by its header. The text field, when it receives focus after mouseup, should not cause the layout bug.

The result that occurs instead:

The layout breaks and the window becomes 'stuck' in Firefox 3.

Screenshot or Video:

See attached image. The window should stay within the white space, but 'breaks out' into the blue space when dragged to the right.

Jamie Avins
4 Mar 2010, 2:30 PM
[type]: fix
[module]: Window
[id]: #682
[desc]: Fixes #682. When a defaultButton is specified, it will no longer be focused if it is outside of the Window's container.

15 Feb 2011, 8:36 AM
Great solution. Tks. =)