Question

If I have something like this:

    var container = Ext.create('Ext.container.Container', {
    plain:true,
    width : 300,
    height: 300,
    html: 'Super',
    cls:'container',
    renderTo:Ext.getBody(),
    draggable:true,
    closable:false,
    resizable:{
        pinned:true,
        dynamic:true
    }
}).center();

the container is “resizable”, but will only resize on the right and bottom (south, east) side. If I resize the container on the left or top side, the container will not move, it stands on the same position. How to deal with that? If I take a window it change the position too.

For example:

    var win = Ext.create('Ext.window.Window', {
    plain:true,
    width : 300,
    height: 300,
    html: 'Super',
    cls:'container',
    renderTo:Ext.getBody(),
    draggable:true,
    closable:false,
    resizable:{
        pinned:true,
        dynamic:true
    }
}).center().show();

Does the job. But I will use a container.

Answer 1

I forget to put “floating:true”, windows are per default true, but not containers.
Here is a link introducing this feature: http://www.sencha.com/learn/components/ “Floating Components”. Then the containers resizes as aspected.