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 :

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

});
f.show();

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./#fiddle/1dj

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

});
f.show();

• javascript
• extjs

Share Improve this question Follow edited Nov 7, 2013 at 4:43 Hariharan 3,26344 gold badges2222 silver badges3131 bronze badges asked Nov 7, 2013 at 4:19 user191542user191542 28511 gold badge88 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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 ponent/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

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);

Please refer below code.

Config:

region -> Defines the region inside

padding -> Specifies the padding for this ponent

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();