PDA

View Full Version : image in tooltip



raj_plays
20 Nov 2013, 8:13 AM
Hi,
My form has many image upload fields.
Next to each upload field, I have a textfield that shows the image file name that was uploaded.
I need to show a tooltip popup with the image in it when the user hovers over the textfield.
Please help.

I am using ver 3.3.1 and Firefox 11

israelroldan
3 Dec 2013, 12:29 PM
You need to do this using the 'fileselected' event of the field and HTML5's FileReader, something like this may work in your case:


Ext.onReady(function() { Ext.QuickTips.init();
var simple = new Ext.FormPanel({
frame: true,
title: 'Sample Form',
width: 350,
items: [new Ext.ux.form.FileUploadField({
fieldLabel: 'Test',
buttonOnly: true,
listeners: {
'fileselected': function(fb, v) {
var reader = new FileReader();


reader.onload = function(e) {
var el = Ext.fly('img-preview');
el.update('<img src="' + e.target.result + '" />');
}


reader.readAsDataURL(fb.fileInput.dom.files[0]);
}
}
}), new Ext.Panel({
id: 'img-preview',
frame: true,
html: 'Image goes here'
})]
});


simple.render(document.body);
});