How can i change the position of floatable form in extjs

Question

I have the ExtJS form which is floating

Now i want to give % margin from top and left but its not working.

Example is here :

https://fiddle.sencha.com/#fiddle/1dj

var f = new Ext.form.Panel({
    width: 400,
    height: 400,
    title: 'Foo',
    floating: true,
     closable : true,
    y: '10%',
    x: '10%',

});
f.show();

Answer 1

Try the below for size:

var leftPercent=10;
var rightPercent=10;
// Create a viewport, this automatically scales to the window height/width so is predictable in its size
var viewport=Ext.create('Ext.container.Viewport', {
    items:[
        f
    ],
    listeners:{
        resize:function(){
            // if the form has been added to the viewport, change its position
            f && f.setPosition(viewport.getWidth()*(rightPercent/100), viewport.getHeight()*(rightPercent/100));
        }  
    }
});


var f = new Ext.form.Panel({
    width: 400,
    height: 400,
    title: 'Foo',
    autoShow:true,
    floating: true,
    // set the initial position of the form (not necessarily needed)
    x:viewport.getWidth()*(rightPercent/100),
    y:viewport.getHeight()*(rightPercent/100)    
});

It should provide you a decent basis to improve/edit. The important things are:

1. The window is placed within a component/element which is known (e.g. the viewport per above)

2. The height/width of the parent container behave as predicted during user interaction with the view

3. Any alterations to the height width of the parent container, then lead the child container to reposition itself accordingly

Answer 2

You can change the position of Ext.form.Panel by using setPosition() function.

Eg:-

var f = new Ext.form.Panel({
    width: 400,
    height: 400,
    title: 'Foo',
    floating: true,
     closable : true,
    y: '10%',
    x: '10%',

});
f.show();
f.setPosition(100, 200, true);

Answer 3

Please refer below code.

Config:

region -> Defines the region inside

padding -> Specifies the padding for this component

var f = new Ext.form.Panel({
    width: 400,
    height: 400,
    title: 'Foo',
    floating: true,
    closable : true,
    //padding : '10 0 0 20', // example: '10 0 0 20' (top, right, bottom, left).
    region : 'center'  // possible values north, south, east, west, and center

});
f.show();

Note: padding used for smaller variation.

Second try :

var f = new Ext.form.Panel({
    width: 400,
    height: 400,
    title: 'Foo',
    floating: true,
    closable : true,
    left : 10,
    top : 10

});
f.show();