Позиционирование компонента img внутри динамического panel в лайоуте
ExtJS 4.1
Приложение MVC:
Ext.application({
name: 'ECS2',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
xtype: 'box',
height: 30,
html: '<h1>Система сертификатов ECS</h1>'
},{
region: 'west',
width: 450,
xtype: 'view_invoices_list'
},{
region: 'center',
//bodyPadding: 10,
xtype: 'view_certs_preview_area'
}]
});
},
controllers: ['controller_invoices', 'controller_certs_preview']
});
Вьювер сертификатов:
Ext.define('ECS2.view.view_certs_preview_area.js' ,{
id: 'certs_panel',
extend: 'Ext.panel.Panel',
alias : 'widget.view_certs_preview_area',
title: 'Просмотр, печать и экспорт сертификатов',
dockedItems: [{
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'
}]
}],
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: {
xtype: 'image',
src: 'images/31302.png',
height: Ext.getCmp('certs_panel').getHeight() / 2,
width: Ext.getCmp('certs_panel').getWeight() / 2
}
});
В самом конце - тестовая заглушка показа картинки сертификата. Требуется, чтобы она отображалась посредине панели (по вертикали и горизонтали) в некотором масштабе относительно панели в лайоуте, в которой она находится и при изменении размера окна браузера - автоматически изменялся масштаб изображения сертификата. В приведенном выше примере ругается на "Uncaught TypeError: Cannot call method 'getHeight' of undefined" Я так понимаю, это из-за того, что при инициализации компонента при загрузке приложения еще не известна высота родительского компонента Panel, потому и ругается на вызов метода получения его высоты. Как реализовать мою задачу позиционирования и автоматического масштабирования ? Засунуть изменение размеров img в контроллер на событие resize ? |
честно говоря не знаю более простого способа чем высчитывать координаты и габариты вручную, например:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src='http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all.js'></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
<script>
Ext.onReady(function() {
Ext.define('Bla',{
extend: 'Ext.panel.Panel',
initComponent: function() {
this.items = [{
xtype: 'image',
src: 'http://eletronichunter.files.wordpress.com/2010/06/extjs_splash.jpg'
}];
this.callParent(arguments);
}
});
Ext.create('Bla', {
height: 200,
title: 'ExtJS',
resizable: true,
width: 200,
renderTo: Ext.getBody(),
margin: 30,
listeners: {
resize: function() {
var img = this.down('image'),
box = this.getBox(),
hh = this.getHeader() ? this.getHeader().getHeight() : 0; // определим нужно ли учитывать высоту заголовка
with(box) {
x += width/4;
y += hh+(height-hh)/4;
height = (height-hh)/2;
width /= 2;
}
img.getEl().setBox(box);
}
}
});
});
</script>
</head>
<body></body>
</html>
|
У вас вроде пример под ExtJS 3 заточен. Я же в app MVC делаю...
|
Цитата:
Какая разница MVC не MVС, я пример привел, при желании логику в контроллер можно перенести. |
Вложений: 1
В итоге сделал немного изящнее, через масштабирование изображения внутри родительского компонента панели и подбор лайоута (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. На момент создания поста - некорректно работал аттач изображения... |
В итоге все сие было багом лайоутов версии 4.07, поставил последнюю 4.1.0 - все заработало...
|
| Часовой пояс GMT +3, время: 03:25. |