JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-debug.js"></script>
JavaScript
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();
...