Resposta.js

Ext.define("Schw.view.Resposta", {
    extend: 'Ext.Container',
    xtype: 'resposta',

    config: {
        cls: 'xresposta',
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,

        items: [
            {
                xtype: 'rodape'
            },
            {
                xtype : 'toolbar',
                docked: 'bottom',
                cls: 'player',
                height: 68,
                layout: 'vbox',
                items: [
                    {
                        xtype: 'spacer',
                        flex: 1
                    },
                    {
                        layout: 'hbox',
                        items: [
                            {
                                xtype: 'button',
                                id: 'playbutton',
                                action: 'playmusic',
                                width: 100,
                                height: 50
                            },
                            {
                                xtype: 'panel',
                                id: 'player-progressbar',
                                width: 100,
                                style: 'text-align:center;',
                                html: '<div class="progress progress-striped active"><div id="progressbar" class="bar" style="width: 100%;"></div></div>'
                            },
                            {
                                xtype: 'spacer',
                                flex: 1
                            }
                        ]
                    },
                    {
                        layout: 'hbox',
                        height: 20,
                        items: [
                            {
                                xtype: 'spacer',
                                flex: 1
                            },
                            {
                                id: 'player-time',
                                html: '00:00',
                                width: 50,
                                style: 'text-align:center;'
                            },
                            {
                                id: 'time-separator',
                                html: ' / ',
                                width: 15,
                                style: 'text-align:center;'
                            },
                            {
                                id: 'audio-duration',
                                html: '00:00',
                                width: 50,
                                style: 'text-align:center;'
                            },
                            {
                                xtype: 'spacer',
                                flex: 1
                            }
                        ]
                    }
                ]
            }
        ]
    }
});