PDA

View Full Version : Add an image to the formpanel



zhfxu_cs
24 Nov 2007, 12:21 AM
I am trying to load a record to a formpanel. Everything works fine except that i can't get the image field and show the image in the formpanel. Here is the code:



function buildHtml(imagefile) {
var html = '<img src="${ctx}'+imagefile+'" height=92 width=92 />';
return html;
}

var formPanel = new Ext.FormPanel({
labelAlign: 'right',
frame:true,
bodyStyle:'padding:5px 5px 0;',
width: 633,
labelWidth: 60,
url:'${ctx}/admin/article.do?method=save4ext',
reset: function() {
this.getEl().dom.reset();
Ext.getCmp("title").focus();
},
// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'results'
}, ['id', {name: 'catalog', mapping: 'catalogid'}, 'title', 'author', 'derive', 'url', 'imagefile', 'digest', 'content', 'createdate', 'lastdate', 'counts'] //'imagefile' is the image file name i want.
),
items: [{
layout:'column',
items:[{
columnWidth:.74,
xtype:'fieldset',
title: '基本信息',
height: 150,
labelWidth: 50,
defaults: {width: 270},
defaultType: 'textfield',
items: [{
fieldLabel: '<span style="color:red">*</span>标题',
width: 350,
name: 'title',
allowBlank: false, blankText:'标题为必填项'
},{
fieldLabel: '编辑',
name: 'author'
},{
fieldLabel: '出处',
name: 'derive'
},{
fieldLabel: '链接',
name: 'url',
vtype: 'url'
}]
},{
columnWidth:.05
},{
columnWidth:.19,
height: 150,
xtype:'fieldset',
title: '图片',
buttonAlign: 'center',
items: [{
items: { //This image is not what i want. I want to get it from 'imagefile' dynamically and show it in the form. How to modify the items?
html: buildHtml('/UserFiles/Image/00868164.jpg')
},
style:'margin:0px'
}],
buttons: [{
text: '更改图片',
handler: Upload,
scope: this
}]
}]
}]
});

formPanel.form.load({url:'${ctx}/admin/article.do?method=loadData&id='+selectedId, waitMsg:'Loading'});


Any help is appreciate. Thanks in advance.

flymantang
24 Nov 2007, 12:30 AM
Does it work if you just use one image? So if you take away the dynamic aspect of the code.

zhfxu_cs
24 Nov 2007, 12:52 AM
Thanks for your quick reply.

It can work. but i don't know how to show the image dynamically. can you give me some code?

shibubh
24 Nov 2007, 9:45 PM
hey zhfxu_cs

i think you have to write the code like this


items: [{
items: {
autoLoad:'dynamicImage.aspx'
}]


And in DynamicImage.aspx

you return the html containing the image

Asp.net Code



Response.Write("<b>Dynamic Image</b><br />");
Response.Write("<img src=\"../shared/icons/save.gif\" width=\"15px\" height=\"15px\"; />");
Response.End(); // Here you can made some logic to return the correct image

zhfxu_cs
24 Nov 2007, 11:29 PM
I think it can solve my problem. but perhaps this is not the best way.
I have fetched the image. Must I fetch the same field again?



reader: new Ext.data.JsonReader({
root: 'results'
}, ['id', {name: 'catalog', mapping: 'catalogid'}, 'title', 'author', 'derive', 'url', 'imagefile', 'digest', 'content', 'createdate', 'lastdate', 'counts']
),


In the code above, "imagefile" is the image file name from db.

hendricd
25 Nov 2007, 12:10 PM
Your going to have to use the form.actioncomplete event to do what you want:

define a placeholder for your image (could simply be another panel):


{
columnWidth:.19,
height: 150,
xtype:'fieldset',
title: '图片',
buttonAlign: 'center',
items: {
xtype:'panel'
,id:'imagePreview' //give it a component id for later updating
,style:'margin:0px'
},
,buttons: [{
text: '更改图片',
handler: Upload,
scope: this
}]
}]




Then set up an eventHandler for after the form update occurs:


formPanel.getForm().on('actioncomplete',function(form,action){
if(action && action.type == 'load' && action.result){

var url = action.result.data['imagefile']; //whatever ??
Ext.getCmp('imagePreview').body.update(buildHtml(url));
}
});

formPanel.getForm().load(
{url:'${ctx}/admin/article.do?method=loadData&id='+selectedId
,waitMsg:'Loading'});

zhfxu_cs
25 Nov 2007, 5:05 PM
Excellent! It works fine!
Thank you