我需要一个自定义面板，它始终在指定位置（例如始终在右下角）保留一个按钮。
职位需要尽可能灵活（但静态定义）。从理论上讲，它可以在面板中的任何地方（左居中，居中，左 + 10 像素和底部 - 50 像素，...），它需要是“免费的”。所以它不能被任何其他元素包围，比如工具栏（浮动...）。
我已经实现了这一点，但它仍然存在一个错误，我不确定是否没有更好的方法来做到这一点：
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-index 轻松实现，但这似乎被 Ext-Framework 覆盖，因为当我查看 DOM 时，在元素级别设置了一个非常大的 z-index (> 19000)不能用css轻易覆盖。
5.）我的方法（扩展面板，创建按钮并在 initComponent 中添加侦听器，...）对于我想要实现的目标是否基本正确，或者我的代码中是否存在任何重大缺陷？
谢谢和最好的问候，
麦克风