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

它应该为您提供改进/编辑的合适基础。重要的是：

窗口位于已知的组件/元素内（例如，上面的视口）
父容器的高度/宽度与用户与视图交互时的预测行为
对父容器的高度宽度进行任何更改，然后引导子容器相应地重新定位

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

请参阅以下代码。

配置：

区域 - ＆gt;定义

中的区域

填充 - ＆gt;指定此组件的填充

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

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

3 个答案:

配置：