Javascript ExtJS中的浮动组件

我需要一个自定义面板，它总是将按钮固定在指定位置（例如，总是右下角）

位置需要尽可能灵活（但静态定义）。理论上，它可以在面板内的任何地方（左中、中中、左+10px和下-50px，…），并且它需要“自由”。因此，它不能被任何其他元素包围，如工具栏（浮动…）

我已经做到了这一点，但仍然有一个缺陷，我不确定是否没有更好的方法来做到这一点：

一些具体问题：

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

(二) 有没有比捕捉调整大小事件并手动重新计算更好的方法使按钮始终保持在其位置

(三) 有没有一种方法可以使按钮像普通子项（非浮动）一样，在其父面板上自动显示/隐藏/销毁

(四) 是否有办法自动将浮动按钮隐藏在父按钮的其他子项下？通过按“Add subpanel”（添加子面板）添加2个子面板后，它应自动隐藏在第二个面板下。 我认为这可以通过设置z-index轻松实现，但这似乎被Ext框架覆盖了，因为当我查看DOM时，在元素级别设置了一个真正大的z-index（>19000），这在css中是不容易覆盖的

(五) 我的方法（扩展面板、创建按钮和在initComponent中添加侦听器等）是否基本上符合我想要实现的目标，或者我的代码中是否存在任何重大缺陷

谢谢并致以最良好的问候

迈克这对你有用吗

试试这个

Javascript

    ...
    Line 48 this.addListener('afterrender', this._afterRender, this);
    Line 49 this.addListener('afterlayout', this._updateFloatBtnPos, this); //added
    ...

---

我不确定我是否完全理解你的问题，但是有什么特别的原因使按钮浮动吗？我可能会在面板上使用绝对布局，并将按钮放置在我需要的坐标处。您考虑过使用CSS类扩展吗？包括定位在内的布局通常最好由样式表处理。可能会在CSS3上发布一些提示？@AlexanderTokarev：我需要在面板中添加按钮以外的其他项目（请参阅JSFIDLE示例并按下工具栏中的“添加子面板”按钮）。这些项目的布局也需要可交换。在这个例子中，它是一个hbox布局，但也可以是任何其他布局…@Eric：感谢您的输入，我以前没有考虑过这一点，现在来看看它。在Ext JS术语中，浮动组件是一个没有父容器的组件，并且相对于文档体“浮动”。典型浮动组件的一个示例是Ext.window.window。在您的情况下，不需要使用浮动组件；您可以使用正确选择的布局和一些事件处理程序。没有必要把事情弄得太复杂了。对不起，这对我不管用。如上所述，按钮需要在面板内“自由”（不被任何东西包围），位置可以在任何地方（同时水平和垂直居中）。无论如何，谢谢你的投入！

    ...
    Line 48 this.addListener('afterrender', this._afterRender, this);
    Line 49 this.addListener('afterlayout', this._updateFloatBtnPos, this); //added
    ...