CODEWITHSUNDEEP
htmlcssextjsextjs4.2
AMember
AMember

Reputation: 3057

Extjs 4.2 float a button to a fixed location in the application

I am using ExtJs 4.2

My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.

This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.

How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...

Here is what I have tried:

Ext.define('NG.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    id: 'appviewport',
    items: [{
        itemId: 'app-header',
        xtype: 'appheader',
        region: 'north',
        weight: 10,
        border: false,
        height: 60
    }, {
        itemId: 'navigation',
        xtype: 'button',
        region: 'west',
        weight:15
    }, {
        xtype: 'carddeckmanager',
        region: 'center',
        weight:10,
        border: false,
        cls:'n-cardmanager-box',
        items: [{
            itemId: 'dashboard',
            xtype: 'dashboard'
        }]
    }]
});

but this makes the button expand as the height of the viewport.

Upvotes: 1

Views: 6930

Answers (1)

rixo
rixo

Reputation: 25011

If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).

Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.

All of this gives us:

var body = Ext.getBody();

// Create the button
var button = Ext.widget('button', {
    text: "Yo"
    ,floating: true
    ,renderTo: body
});

// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);

// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);

Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...

Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:

{    
    region: 'west',
    layout: {type: 'hbox', pack: 'center', align: 'middle'},
    items: [{
        xtype: 'button',
        text: "Viewport button"
    }]
}

Upvotes: 10

Related Questions