常に指定された位置にボタンを保持するカスタム パネルが必要です (例: 常に右下)。
位置は可能な限り柔軟にする必要があります (ただし、静的に定義されます)。理論的には、パネル内のどこにでも配置でき (左中央、中央中央、左 + 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 つのサブパネルを追加すると、2 番目のパネルの下に自動的に非表示になります。これは z-index を設定することで簡単に達成できると思いましたが、DOM を見ると要素レベルで設定された非常に大きな z-index (> 19000) があるため、これは Ext-Framework によって上書きされるようです。 css で簡単に上書きすることはできません。
5.) 私のアプローチ (パネルを拡張し、ボタンを作成し、initComponent にリスナーを追加するなど) は基本的に私が達成したいことに対して正しいですか、それともコードに大きな欠陥がありますか?
感謝をこめて、
マイク