Расположите плавающую панель Ext в левом нижнем углу

Question

Новый для ExtJS здесь.Я пытаюсь расположить плавающую Ext.panel.Panel в левом нижнем углу окна браузера, но безрезультатно.Ознакомьтесь с фрагментами кода ниже и дайте мне знать, что я делаю не так.Заранее спасибо.

// JavaScript
Ext.define('examplePanel.view.ExamplePanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'exPanel',
    width: 138,
    floating: true,
    cls: 'example-panel',
    closeAction: 'hide',
    collapsible: true,
    defaultAlign: 'bl-bl',
    fixed: true,
    border: true,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    header: {
        title: 'Example',
        titleAlign: 'center',
        cls: 'panel-header'
    },
    items: [
        // item 1
        // item 2
    ]
});

// CSS
.example-panel {
  position: fixed;
  bottom: 0;
  left: 0;
}

Answer 1

Вот возможное решение:

FIDDLE

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var panel = Ext.create({
            xtype: 'panel',
            title: 'Left Bottom',
            frame: true,
            renderTo: Ext.getBody(),
            height: 200,
            width: 400,
            collapsible: true
        });

        //Get the doc measurements
        var body = document.body;
        var html = document.documentElement;

        var height = Math.max( body.scrollHeight, body.offsetHeight,
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

        var width =  Math.max( body.scrollWidth, body.offsetWidth,
                       html.clientWidth, html.scrollWidth, html.offsetWidth );

        //Position the pnel
        panel.setPosition((width - panel.getWidth()),(height - panel.getHeight()));

    }
});