Показать сообщение отдельно
  #1 (permalink)  
Старый 31.05.2012, 14:13
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Позиционирование компонента 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 ?

Последний раз редактировалось Allan Stark, 31.05.2012 в 14:19.
Ответить с цитированием