PDA

View Full Version : Display Image on Form Window Dynamically



zakif
27 Feb 2012, 3:22 AM
I have an "xtype: box'" to display image inside a pop-up form window. It works well when I use static image url. But I got confused when tried to make it dynamic.

I need to make variable (e.g var filename) that the value filled by field "filename" in the same form. I've tried Ext.getCmp("filename").getValue but still failed.

How should I do to solve that? Where should I declare the variable? And how to get the "filename" value?

Thanks in advance.

Here is the code:


this_is_TypeSiteFormPanel = function (windowX) {
this.windowX = windowX;

this_isitem_TypeSiteFormPanel.superclass.constructor.call(this, {
header:false,
frame:true,
fileUpload: true,
defaultType:'textfield',
monitorValid:true,
items : [
{
xtype:'hidden',
name:'id_item'
},{
xtype:'hidden',
name:'filename'
},{
xtype: 'box',
autoEl: {tag: 'img', src: 'urltoimages/thumb_'+filename+'.jpg', width: 100, height:80}
}

mitchellsimoens
27 Feb 2012, 5:46 AM
You can place the filename on as a property of the box so you can resolve the filename based on that property.

zakif
27 Feb 2012, 8:15 PM
Thanks simoens for your advice.

I've already check the available properties of BoxElement and found seven of them: disabled, el, hidden, initialConfig, ownerCt, refOwner, rendered. Unfortunately, I still have no idea about how to call the filename variable and put it into src of autoEl's xtype:box.

However, I've tried the Ext.getCmp, but the alert test show the "undefined" instead of "name_of_any_image_file.jpg" that I wanted. Here is he revised code:


this_is_TypeSiteFormPanel = function (windowX) {
this.windowX = windowX;
var filename = Ext.getCmp('filename');
alert(filename);
this_isitem_TypeSiteFormPanel.superclass.constructor.call(this, {
header:false,
frame:true,
fileUpload: true,
defaultType:'textfield',
monitorValid:true,
items : [
{
xtype:'hidden',
name:'id_item'
},{
xtype:'hidden',
name:'filename',
id: 'filename'
},{
xtype: 'box',
autoEl: {tag: 'img', src: 'urltoimages/thumb_'+filename, width: 100, height:80}
}

zakif
28 Feb 2012, 10:13 PM
Ok solved.

A friend of mine justr trick the SQL query before loaded to JSON data, so that the filename field (in JSOn array), containing value like '<img src="" />' filename. While on the ExtJS side, the value displayed at form window as xtype:displayfield with name: filename.