В итоге сделал немного изящнее, через масштабирование изображения внутри родительского компонента панели и подбор лайоута (vbox).
Отображение (вью):
Ext.define( 'ECS2.view.view_certs_preview_area.js', {
id: 'certs_panel',
extend: 'Ext.panel.Panel',
alias : 'widget.view_certs_preview_area',
title: 'Просмотр, печать и экспорт сертификатов',
layout: {
type: 'vbox',
align: 'center'
},
dockedItems: [{
id: 'toolbar_panel',
xtype: 'toolbar',
dock: 'top',
height: 35,
items: [{
xtype: 'button',
text: 'Скачать сертификат:',
arrowAlign: 'right',
icon: 'images/gears.png',
menu : [
{
text: 'В формате TIF/TIFF',
icon: 'images/tif_format.png'
},{
text: 'В формате JPEG/JPG',
icon: 'images/jpg_format.png'
},{
text: 'В формате GIF',
icon: 'images/gif_format.png'
},{
text: 'В формате PNG',
icon: 'images/png_format.png'
}
]
},'-',{
text: 'Скачать накладную',
icon: 'images/folder.gif'
},'-',{
text: 'Распечатать сертификат',
icon: 'images/print.png'
}]
}],
// Отображаемый сертификат
items: {
id : 'certs_image',
xtype: 'image',
src: 'images/31302.png'
}
});
Контроллер:
Ext.define('ECS2.controller.controller_certs_preview', {
extend: 'Ext.app.Controller',
views: 'view_certs_preview_area',
init: function () {
this.control({
'viewport > panel > image': {
render: this.onImgRendered
}
});
},
onImgRendered: function() {
Ext.getCmp('certs_image').setHeight('95%');
}
});
Т.е. в обработке события рендера изображения оно масштабируется внутри родительского контейнера (панели) до 95%.
Одна проблема - сразу после отрисовки в браузере изображение сертификата (картинки) "прилипает" к левой части пространства панели и только после любых манипуляций с окном браузера (например при ресайзе) - позиционируется по центру панели.
К тому же изображение выравнивается только по горизонтали, но не по вертикали.
Что хочется получить - в аттаче к сообщению.
Пробовал другие лайоуты в различной комбинации - не удается победить :-(
Помогите дошлифовать напильником...
P.S. На момент создания поста - некорректно работал аттач изображения...