javascript - 如何在 extjs 中更改浮动表单的位置

Question

我有 ExtJS 表单，它是floating

现在我想给%保证金from top and left，但它不起作用。

示例在这里：

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

试试下面的尺寸：

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

它应该为您提供完善/编辑的良好基础。重要的是：

1. 窗口被放置在一个已知的组件/元素中（例如上面的视口）

2. 父容器的高度/宽度在用户与视图交互期间的行为与预期一致

3. 对父容器的高度宽度进行任何更改，然后导致子容器相应地重新定位自己

Answer 2

您可以使用setPosition()函数更改 Ext.form.Panel 的位置。

例如：-

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

请参考下面的代码。

配置：

region -> 定义里面的区域

padding -> 指定这个组件的填充

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

注意：填充用于较小的变化。

第二次尝试：

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

});
f.show();