View Full Version : How to make a Ext.window.Window floating on/off with a button

16 Jun 2014, 11:41 AM
I wonder if it's possible to make a Ext.window.Window not floating at first when the page is loaded, but allow the user to detach (make it floating) with a button. Even further, would it be possible to stop the floating and return the window to initial position.

By the way, the configs 'floatable' and 'floating' of the Ext.window.Window are not working with me, because the window is floating even if I set these to false.

There is my window code:

Ext.create('Ext.window.Window', {
title: "Layer: {{ shapefile }} | Click on feature to edit.",
x: 350,
y: 120,
height: 800,
width: 1000,
collapsible: true,
closable: true,
bodyBorder: false,
maximizable: true,
shadowOffset: 6,
layout: 'fit',
items: [

17 Jun 2014, 8:24 AM
I don't think the "floating" config for windows is designed to be turned on and off at will (which seems to be what you're trying to do). It is possible, however, to get the same effect by using two separate components (a "pinned" panel, and a floating window) and then simply moving the child components between the two and hiding the inactive one. Here's a sample fiddle that shows what I mean:


I've included multiple components to show they can all be moved together under a single container, and you can type something in the text field to observe that the state is persisted.