Databases
StackOverflow2013
Postsdbo
POFloating components in ExtJS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFloating components in ExtJS
    primarykey
    data
    text
    <p>i need a custom panel which always holds a button at a specified position (e.g. always bottom-right).</p> <p>The position needs to be as flexible as possible (but statically defined). Theoretically it could be everywhere within the panel (left-centered, center-center, left + 10px &amp; bottom - 50px, ...) and it needs to be "free". So it must not be surrounded by any other element like a toolbar (floating...).</p> <p>I've already achieved this but there's still a bug in it and i'm not sure if there ain't no better way to do it:</p> <p><a href="http://jsfiddle.net/suamikim/uQDDu/1/" rel="nofollow">http://jsfiddle.net/suamikim/uQDDu/1/</a></p> <pre><code>Ext.onReady(function() { var floatBtn, toolbar, win; Ext.define('PanelWithFloatButton', { extend: 'Ext.panel.Panel', items: [], constructor: function(config) { // region private variables (no getter &amp; 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 &amp;&amp; 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(); }); </code></pre> <p>Some specific questions:</p> <p>1.) Why is the button positioned correctely only after the window has been moved manualy for the first time and not right from the start?</p> <p>2.) Is there a better way to make the button always stay at it's position than by catching the resize-event and recalculating manually?</p> <p>3.) Is there a way to make the button automatically show/hide/destroy with it's parent-panel like normal sub-items (not floating) do?</p> <p>4.) Is there a way to automatically hide the floating button under other child-items of the buttons parent? After adding 2 more subpanels by pressing "Add subpanel" it should hide automatically under the second panel. I thought that this could be easily achieved by setting the z-index but this seems to be overwritten by the Ext-Framework because when i look at the DOM there is a realy big z-index (> 19000) set at element-level which can't be overwritten that easy with css.</p> <p>5.) Is my approach (Extending the panel, creating the button and adding listeners in initComponent, ...) basically correct for what i want to achieve or are there any major flaws in my code?</p> <p>Thanks &amp; best regards,</p> <p>Mike</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USsuamikim
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFloating components in ExtJS
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POFloating components in ExtJS
      1. This table or related slice is empty.
      1. VTUpMod
    1. CONot sure I understand your problem in full, but is there any particular reason to make that button floating? I would probably use absolute layout on the panel and place the button at the coordinates I need.
      singulars
      1. POFloating components in ExtJS
      1. USAlex Tokarev
    2. COHave you considered using a CSS class extension? Layouts including positioning are usually best dealt with by Stylesheets. Maybe post on CSS3 for some tips?
      singulars
      1. POFloating components in ExtJS
      1. USEric
    3. CO@AlexanderTokarev: I need the possibility to add other items than the button to the panel (see the jsfiddle-example and press the "Add subpanel"-button in the toolbar). AND the layout of those items needs to be exchangable too. In the example it is an hbox-layout but it could also be any other layout...
      singulars
      1. POFloating components in ExtJS
      1. USsuamikim
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload