Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 01.06.2012, 12:25
С++/C# modest developer
Отправить личное сообщение для nekto_O Посмотреть профиль Найти все сообщения от nekto_O
 
Регистрация: 07.11.2011
Сообщений: 244

честно говоря не знаю более простого способа чем высчитывать координаты и габариты вручную, например:

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2012, 16:41
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

У вас вроде пример под ExtJS 3 заточен. Я же в app MVC делаю...
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2012, 16:52
С++/C# modest developer
Отправить личное сообщение для nekto_O Посмотреть профиль Найти все сообщения от nekto_O
 
Регистрация: 07.11.2011
Сообщений: 244

Сообщение от Allan Stark
У вас вроде пример под ExtJS 3 заточен. Я же в app MVC делаю...
о_О щито? какой такой 3? ExtJS 4 давно юзаю..

Какая разница MVC не MVС, я пример привел, при желании логику в контроллер можно перенести.
Ответить с цитированием
  #5 (permalink)  
Старый 13.06.2012, 14:45
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

В итоге сделал немного изящнее, через масштабирование изображения внутри родительского компонента панели и подбор лайоута (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. На момент создания поста - некорректно работал аттач изображения...
Изображения:
Тип файла: jpg p1.jpg (50.4 Кб, 6 просмотров)

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

В итоге все сие было багом лайоутов версии 4.07, поставил последнюю 4.1.0 - все заработало...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
У элемента img внутри form пропадает событие после onsubmit формы Eugene Events/DOM/Window 2 18.06.2009 19:21