1

I'm using ExtJS 5. I need a container shown on top of other container and I don't know how to handle layouts to achieve this. The desired effect is: enter image description here

Transparency is only for the issue purposes.

Using pure HTML it could be:

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <title>a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body style="height: 100%; padding: 0; margin: 0">
        <div style="height: 100%; background-color: #bbb">
            <div style="height: 50px; background-color: #888; padding: 15px; font-size: 20px; position: absolute; width: 100%; box-sizing: border-box">
                Header
            </div>
            <div style="background-color: yellow; height: 100%; padding-top: 50px; box-sizing: border-box">
                <div style="width: 100%; height: 100%; padding: 10px; box-sizing: border-box; position: relative">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat nunc mauris, et vestibulum purus luctus a. Nulla semper semper augue vitae varius. Integer sit amet lobortis leo. Ut lobortis volutpat molestie. Sed malesuada scelerisque cursus. Praesent ac placerat tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac augue elementum, aliquet purus suscipit, venenatis tellus. Sed varius arcu semper, tristique dui nec, scelerisque nibh. 
                    <div style="position: absolute; opacity: 0.8; z-index: 999; top: 0px; left: 0; height: 100%; width: 200px; box-sizing: border-box; background-color: green; padding: 15px; color: white;">
                        Panel on top
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Without the green container it could be simple VBox layout. I don't know how to add this green panel do show like this.

edit

I tried:

Ext.define('MyApp.view.MainView', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.mainview',

    requires: [
        'MyApp.view.MainViewViewModel',
        'Ext.panel.Panel'
    ],

    viewModel: {
        type: 'mainview'
    },
    itemId: 'mainView',
    layout: 'border',

    items: [
        {
            xtype: 'panel',
            region: 'north',
            height: 100,
            itemId: 'headerPanel',
            layout: 'fit',
            title: 'Header'
        },
        {
            xtype: 'panel',
            region: 'center',
            html: '<h3>Lorem</h3>',
            itemId: 'contentPanel',
            title: 'Content'
        }
    ]

});

.

Ext.define('MyApp.view.SideContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.sidecontainer',
    requires: [
        'MyApp.view.SideContainerViewModel'
    ],
    viewModel: {
        type: 'sidecontainer'
    },
    floating: true,
    html: '<p>panel</p>',
    itemId: 'sideContainer',
    maxWidth: 150,
    minWidth: 150,
    width: 150
});

and I don't know what to do next. In console I put Ext.create('MyApp.view.SideContainer').toFront() and got the error me.zIndexManager is undefined.

2
  • When you say "panel on top" you mean zIndex, right? Not vertical align? Jan 21, 2016 at 15:37
  • Yes - I mean z-index.
    – koral
    Jan 21, 2016 at 19:46

1 Answer 1

1

I think you need to create a floating (see https://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Component-cfg-floating) component in your container. And then manage the positioning with setPosition or alignTo (witch need to be manage afterRender because it us el) or CSS

3
  • I know this but I can't handle :( I put in body question my trial code.
    – koral
    Jan 28, 2016 at 15:19
  • I've generated a quick fiddle with your code. It's working :). I comment the viewModel because I did not had the code (but you should uncomment). And to do this properly I suggest to create a panel and to override the afterRendermethod instead of working with the listeners (but I did it like this just because it's was quicker). Hope this is what you wanted
    – Psycho
    Jan 28, 2016 at 16:54
  • Small edit in my Fiddle, I was using ExtJs 6, so I put the two version, you need a little bit a work to fix the positioning (In ExtJs 6 it's working like a charm...) but I put explicit comment (you need to work with alignTo and offsets)
    – Psycho
    Jan 28, 2016 at 17:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.