0

最初にパネル A を表示し、その下にパネル B を表示します。パネル A は JSONP を使用してデータを取得し、ストア ロードのコールバック関数に表示されます。そのため、表示に約 1 秒かかります。

フローティング パネル C をパネル B に位置合わせしました。フローティング パネル C は次のようなものです。

Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',

    height: 334,
    width: 540,
    layout: {
        type: 'border'
    },
    title: 'Run report',

    initComponent: function () {
        var me = this;
        floatingpanel = Ext.create('Ext.panel.Panel', {
            html: "something",
            width: 100,
            height: 50,
            floating: true,
            listeners: {
                'show': {
                    fn: function () {
                        floatingpanel.alignTo(PanelB, "tr-tr", [left, top]);
                    },
                    scope: floatingpanel,
                    //delay: 1000, // to wait for other component to show
                    single: true
                }
            }
        });


        Ext.applyIf(me, {
            items: [{
                xtype: 'form',
                bodyPadding: 10,
                region: 'center'
            }]
        });

        me.callParent(arguments);
    }
});

次にfloatingpanel.show()、パネルを表示するために呼び出されます。ただし、パネル B には追加されません。

上記のように使用しdelayないと、フローティング パネルが表示されようとしているときにパネル A がまだ使用できないため、フローティング パネル C がパネル A のどこかに表示されます。だから私は「遅延」を入れました。

1 秒後、コールバックが成功したため、パネル A が表示されます。これで、フローティング パネル C が適切な場所でパネル B に位置合わせされます。

コールバック関数は 1 秒または 10 秒で成功する場合があるため、遅延時間を選択するのは困難です。

これを解決する他の方法はありますか？doConstrain を使用して、フローティング パネル C をパネル B: にアタッチしようとしましたfloatingpanel.doConstrain(PanelB)。しかし、どういうわけかうまくいきませんでした。

4

1 に答える 1

0 
initComponent: function () {
    var me = this;
    floatingpanel = Ext.create('Ext.panel.Panel', {
        html: "something",
        width: 100,
        height: 50,
       // floating: true,
        listeners: {
            'show': {
                fn: function () {
                    me.alignTo(PanelB, "tr-tr", [left, top]);
                },
                scope: floatingpanel,
                //delay: 1000, // to wait for other component to show
                single: true
            }
        }
    });


    Ext.applyIf(me, {
        items: [{
            xtype: 'form',
            bodyPadding: 10,
            region: 'center'
        }]
    });

    me.callParent(arguments);
}

..の代わりに上記のコードを使用してください。

于 2014-10-13T10:17:38.543 に答える