Under My Palapa

There are plenty of examples of creating floating windows with ExtJs. However, they all allow the window to be dragged wherever the user chooses. ExtJs supports a ‘constrain’ property on the window. If you just set this to true, then the user cannot drag the window outside of the browser viewport.

However, what if you want to be fancier, and constrain it inside of some other container? It seems obvious, but finding the answer is difficult. People on the ExtJs forums have posted this question, but the responses are generally a step away from being the real answer.

The answer is the renderTo config property, which you should point to the body property of the container. The forum responses generally indicate this, but they fail to mention the body property. This is what works for panels, I haven’t looked at all the other containers. But I have a feeling the concept would still apply.

var myPanel = new Ext.Panel({
    ...
});
var testWin = new Ext.Window({
    title: 'Test',
    width: 300,
    height: 300,
    renderTo: myPanel.body,
    constrain: true,
});
testWin.show();