DockedItems do not respect weight

Question

Sencha documentation says:

If docked items, the weight will order how the items are laid out. Here is an example to put a Ext.toolbar.Toolbar above a Ext.panel.Panel's header ...

I now want to show a container below the buttons config. So I have made a simple fiddle to apply the knowledge of the docs:

https://fiddle.sencha.com/#view/editor&fiddle/26m0

But it doesn't work; the weight is not applied whether I use a big or a small number. Why isn't this working?

Answer 1

The dock config for your container does not have any impact. From the docs:

The side of the Ext.panel.Panel where this component is to be docked when specified in the panel's dockedItems config.

Your container is not inside a dockedItems config. Also it seems that the bigger the weight, the more higher the item will be rendered.

Ext.create('Ext.window.Window',{
    width:300,
    items:[{
        xtype:'container',
        html: 'Normal text'
    }],
    dockedItems: {
        xtype: 'container',
        dock: 'bottom',
        weight: -10,
        html: 'Some text that goes below the buttons'
    },
    buttons:[{
        text: 'Some button',
        weight: 10
    }]

}).show();

Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/26m8