Ext.onReady(function() {
    var backendViewport = new Ext.Viewport({
        layout: 'fit',
        items: [{
            /*
             * Panel tipo accordion
             */
            region: 'center',
            xtype: 'panel',
            layout: 'accordion',
            defaults: {
                bodyStyle: 'padding:15px'
            },
            layoutConfig: {
                titleCollapse: false,
                animate: false,
                activeOnTop: false
            },
            items: [{
                title: 'Subpanel 1',
                html: 'Contenido subpanel 1'
            },{
                title: 'Subpanel 2',
                html: 'Contenido subpanel 2'
            },{
                title: 'Subpanel 3',
                html: 'Contenido subpanel 3'
            }]
        }]
    });
});

En el viewport también tenemos disponibles los mismos layouts que para Ext.Panel, con lo que podemos generar aplicaciones a pantalla completa igual de complejas que con un Ext.Panel, por ejemplo aplicándole el layout ‘border’.

En el siguiente ejemplo, podéis ver la misma distribución en pantalla que en el ejemplo anterior, con la salvedad de que hemos instanciado un Ext.Viewport en lugar de un Ext.Panel