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

How can i change the position of floatable form in extjs

本文关键字：表单 位置 何更改 extjs      更新时间：2023-09-26

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

尝试以下大小：

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. 对父容器的高度宽度的任何更改，然后导致子容器相应地重新定位自身

您可以使用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);

请参考下面的代码。

配置：

区域 -> 定义内部区域

填充 -> 指定此组件的填充

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();
相关文章：