CODEWITHSUNDEEP
javascriptextjs
user191542
user191542

Reputation: 285

How can i change the position of floatable form in extjs

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

Upvotes: 4

Views: 7290

Answers (3)

SW4
SW4

Reputation: 71170

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

Upvotes: 2

Sivakumar
Sivakumar

Reputation: 1497

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

Upvotes: 1

Hariharan
Hariharan

Reputation: 3263

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

Upvotes: 0

Related Questions