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

以下のコードを参照してください。

構成:

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

注: 小さい変動に使用されるパディング。

2回目の試行:

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

});
f.show();