ExtJS中的浮动组件

我需要一个自定义面板，它始终将按钮保持在指定位置（例如，始终在右下角）。

职位需要尽可能灵活（但要静态定义）。从理论上讲，它可以在面板内的任何地方（左居中，居中，左+10px和底部-50px，...），并且需要"自由"。因此，它不能被任何其他元素包围，例如工具栏（浮动...

我已经实现了这个，但它仍然有一个错误，我不确定是否没有更好的方法可以做到这一点：

http://jsfiddle.net/suamikim/uQDDu/1/

Ext.onReady(function() {
    var floatBtn, toolbar, win;
    Ext.define('PanelWithFloatButton', {
        extend: 'Ext.panel.Panel',
        items: [],
        constructor: function(config) {
            // region private variables (no getter & setter available)
            this._floatingBtn = undefined;
            // endregion private variables
            // region private events
            this._afterRender = function() {
                this._floatingBtn.show();
            };
            // endregion private events
            // region private functions
            this._updateFloatBtnPos = function() {
                var bodySize = this.body.getSize(),
                    btnSize = this._floatingBtn.getSize();
                if (this._floatingBtn && this._floatingBtn.el) {
                    this._floatingBtn.setPosition(bodySize.width - btnSize.width - 10, bodySize.height - btnSize.height - 10);
                }
            };
            // endregion private functions
            return this.callParent(arguments);
        },
        initComponent: function() {
            // Create floating button
            this._floatingBtn = Ext.create('Ext.button.Button', {
                text: 'Floating button, always bottom-right...',
                floating: true,
                style: {
                    'z-index': 1
                }
            });
            // Add items
            this.add(this._floatingBtn);
            // Add listeners
            this.addListener('afterrender', this._afterRender, this);
            this.addListener('resize', this._updateFloatBtnPos, this);
            this.addListener('beforedestroy', function() {
                this._floatingBtn.destroy();
            }, this);
            this.addListener('beforehide', function() {
                this._floatingBtn.hide();
            }, this);
            this.addListener('show', function() {
                this._floatingBtn.show();
            }, this);
            return this.callParent(arguments);
        }
    });
    btnParent = Ext.create('PanelWithFloatButton', {
        title: 'Button-Parent',
        layout: {
            type: 'vbox',
            align: 'stretch'
        }
    });
    toolbar = Ext.create('Ext.toolbar.Toolbar', {
        region: 'north',
        defaultType: 'button',
        items: [{
                text: 'Toggle visibility of Button-Parent',
                handler: function() {
                    try {
                        btnParent.setVisible(!btnParent.isVisible());
                    } catch (e) {
                        // btnParent is already destroyed
                    }
                }
            }, '|', {
                text: 'Destroy Button-Parent',
                handler: function() {
                    try {
                        btnParent.up().remove(btnParent);
                    } catch (e) {
                        // btnParent is already destroyed
                    }
                }
            }, '|', {
                text: 'Add subpanel',
                handler: function() {
                    btnParent.add(Ext.create('Ext.panel.Panel', {
                        title: 'Sub-Panel',
                        height: 200,
                        style: {
                            'z-index': 2
                        }
                    }));
                }
        }]
    });
    win = Ext.create('Ext.window.Window', {
        width: 500,
        height: 500,
        layout: 'border',
        items: [
            toolbar, 
            {
                xtype: 'panel',
                region: 'center',
                layout: 'fit',
                items: btnParent
        }]
    }).show();
});  

一些具体问题：

1.）为什么按钮仅在第一次手动移动窗口后才正确定位，而不是从一开始就正确移动？

2.）有没有比捕获调整大小事件并手动重新计算更好的方法使按钮始终停留在其位置？

3.）有没有办法像普通子项目（不浮动）一样，使用其父面板自动显示/隐藏/销毁按钮？

4.）有没有办法自动隐藏按钮父级按钮的其他子项目下的浮动按钮？通过按"添加子面板"再添加 2 个子面板后，它应该会自动隐藏在第二个面板下。我认为这可以通过设置 z 索引轻松实现，但这似乎被 Ext-Framework 覆盖了，因为当我查看 DOM 时，在元素级别设置了一个非常大的 z 索引（> 19000），不能用 css 轻松覆盖。

5.）我的方法（扩展面板，创建按钮并在initComponent中添加侦听器，...）对于我想要实现的目标基本上是正确的，还是我的代码中存在任何重大缺陷？

谢谢和最好的问候，

话筒