簡體   English   中英

ExtJS浮動面板出現在錯誤的位置,因為上方的其他組件需要花費一些時間才能顯示

[英]ExtJS floating panel appeared in a wrong place because other components above it takes time to display

我先顯示面板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 ,則浮動面板C出現在面板A中的某個位置,因為當浮動面板即將顯示時,面板A尚不可用。 所以我把“延遲”。

1秒后,面板A顯示為回調成功。 現在,浮動面板C在正確的位置與面板B對齊。

由於回調函數可能會在1秒鍾或10秒鍾內成功完成,因此很難選擇延遲時間。

還有其他解決辦法嗎? 我嘗試使用doConstrain將浮動面板C附加到面板B: floatingpanel.doConstrain(PanelB) 但是不知何故,它不起作用。

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

請使用上面的代碼代替..

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM