Ext.define('App.view.ImageField',{
	extend: 'Ext.form.FieldContainer',
	alias: 'widget.imagefield',
	padding: 4,

	fieldLabel: undefined,
	hideEmptyLabel: true,
	layout: {
		type: 'vbox',
		align: 'center',
		pack: 'center',
	},
	thumbnailPath: undefined,
	path: undefined,
	name: undefined,
	filesize: undefined,
	imageHeight: 0,
	imageWidth: 0,
	fileId: 0,
	checkboxHidden: false,
	labelHidden: false,

	setChecked: function(isCheck){
		this.down("checkbox").setValue(isCheck);
	},

	initComponent: function() {
		var me = this;

		Ext.applyIf(me, {
			items:[
				{
					xtype: 'container',
					width: 300,
					height: 300,
					layout: {
						type: 'vbox',
						align: 'center',
						pack: 'center',
					},
					items: [
						{
							xtype: 'image',
							src: me.thumbnailPath?me.thumbnailPath:me.path,
							style: 'object-fit:contain;',
							maxWidth: 300,
							maxHeight:300,
							listeners: {
								added: function(field, event){
									var h = me.imageHeight, w = me.imageWidth;
									if(h>w){
										if(h>field.maxHeight){
											w = w*(field.maxHeight/h);
											h = field.maxHeight;
										}
									}else{
										if(w>field.maxWidth){
											h = h*(field.maxWidth/w);
											w = field.maxWidth;
										}
									}
									field.setWidth(w);
									field.setHeight(h);
								},
								el: {
									click: function() {
										window.open(me.path,'Image','resizable=1');
									}
								}
							}
						},
					]
				},
				{
					xtype: 'label',
					hidden: me.labelHidden,
					text: me.name
				},
				{
					xtype: 'checkbox',
					inputValue: 1,
					uncheckedValue: 0,
					hidden: me.checkboxHidden,
					fileId: me.fileId,
					filePath: me.path,
					skey: me.skey,
					handler: function(checkbox, value){
						me.selected = value;
					}
				}
			]
		});
		me.callParent(arguments);
	}
});