PDA

View Full Version : how to show image after upload in window form extjs4



rushi2440
22 Mar 2012, 1:45 AM
Hi.. sencha forum memberI am able to upload the file using below code but now as soon as the file uploaded I want to show it to my form panel . My Window looks like below33000after pressing the upload I am able to save the image path to my db. And on success I want to show the image to my SENCHA marked area.below is my window code
Ext.define('rms.view.companymgt.companyAdd',{ extend: 'Ext.window.Window', alias: 'widget.companyadd', id: 'companyadd', itemId: 'companyadd', height: 634, width: 822, modal: true, resizable: false, layout: { type: 'border' }, title: 'Company', constrain: true, imagepath: null, initComponent: function() { var me = this; Ext.applyIf(me, { items: [ { xtype: 'panel', frame: true, id: 'mainpanel', itemId: 'mainpanel', layout: { type: 'border' }, preventHeader: true, title: 'My Panel', flex: 3, region: 'center', items: [ { xtype: 'panel', id: 'westpanel', itemId: 'westpanel', width: 150, preventHeader: true, title: 'My Panel', flex: 1.5, region: 'west', items: [ { xtype: 'textfield', id: 'cmptitle', itemId: 'cmptitle', margin: 10, width: 450, name: 'cmptitle', fieldLabel: 'Company Title', labelWidth: 110 }, { xtype: 'textfield', id: 'cmpname', itemId: 'cmpname', margin: 10, width: 450, name: 'cmpname', fieldLabel: 'Company Name', labelWidth: 110 }, { xtype: 'textfield', id: 'cmpwebsite', itemId: 'cmpwebsite', margin: 10, width: 450, name: 'cmpwebsite', fieldLabel: 'Website', labelWidth: 110 }, { xtype: 'textfield', id: 'cmpfax', itemId: 'cmpfax', margin: 10, width: 450, name: 'cmpfax', fieldLabel: 'Fax No', labelWidth: 110 }, { xtype: 'textfield', id: 'cmpcontact', itemId: 'cmpcontact', margin: 10, width: 450, name: 'cmpcontact', fieldLabel: 'Contact No', labelWidth: 110 }, { xtype: 'textfield', id: 'cmpemail1', itemId: 'cmpemail1', margin: 10, width: 450, name: 'cmpemail1', fieldLabel: 'Email Contact', labelWidth: 110 }, { xtype: 'textfield', id: 'cmpemail2', itemId: 'cmpemail2', margin: 10, width: 450, name: 'cmpemail2', fieldLabel: 'Other Email', labelWidth: 110 }, /*{ xtype: 'button', id: 'btn-upload-logo', itemId: 'btn-upload-logo', margin: '-32 0 0 380', style: 'position:absolute;\n', width: 78, action: 'btn-upload-logo', text: 'Upload Logo' },*/ { xtype: 'combobox', autoShow: true, margin: 10, width: 366, itemId: 'countryname', name: 'countryname', fieldLabel: 'Country', labelWidth: 110, emptyText: 'Select Country...', displayField: 'countryname', store: 'countryStore', valueField: 'id' }, { xtype: 'button', id: 'btn-add-country', itemId: 'btn-add-country', margin: '-32 0 0 380', style: 'position:absolute;', width: 78, action: 'btn-add-country', text: 'Add Country' }, { xtype: 'combobox', id: 'statename', itemId: 'statename', margin: 10, width: 366, name: 'statename', fieldLabel: 'State', labelWidth: 110, emptyText: 'Select State...', displayField: 'statename', store: 'stateStore', valueField: 'id' }, { xtype: 'button', id: 'btn-add-state', itemId: 'btn-add-state', margin: '-32 0 0 380', style: 'position:absolute;', width: 78, action: 'btn-add-state', text: 'Add State' }, { xtype: 'combobox', id: 'cityname', itemId: 'cityname', margin: 10, width: 366, name: 'cityname', fieldLabel: 'City', labelWidth: 110, emptyText: 'Select City...', displayField: 'cityname', store: 'cityStore', valueField: 'id' }, { xtype: 'button', id: 'btn-add-city', itemId: 'btn-add-city', margin: '-32 0 0 380', style: 'position:absolute;', width: 78, action: 'btn-add-city', text: 'Add City' }, { xtype: 'textareafield', height: 73, id: 'cmpaddress', itemId: 'cmpaddress', margin: 10, width: 450, name: 'cmpaddress', fieldLabel: 'Address', labelWidth: 110 }, { xtype: 'htmleditor', height: 118, margin: 10, style: 'background-color: white;', width: 452, fieldLabel: 'Description', labelWidth: 110 } ] }, { xtype: 'form', id: 'centerpanel', itemId: 'centerpanel', preventHeader: true, title: 'My Panel', flex: 1, region: 'center', items: [ { xtype: 'image', height: 158, itemId: 'cmplogoimg', margin: 10, width: 287, src:'' }, { xtype: 'filefield', margin: '10 0 0 15', width: 296, name: 'file', fieldLabel: 'File', labelWidth: 50, msgTarget: 'side', allowBlank: false, emptyText: 'Select file', buttonText: 'Select a File...' } ], dockedItems: [ { xtype: 'toolbar', dock: 'bottom', items: [ { xtype: 'tbfill' }, { xtype: 'button', text: 'Upload', handler: function() { var form = this.up('form').getForm(); alert('VALUE IS :'+form.getValues()); if(form.isValid()){ form.submit({ url: 'company/UploadFile.action', waitMsg: 'Uploading your file...', success: function(fp, o) { Ext.Msg.alert('Success', 'Your file has been uploaded.'); Ext.Ajax.request({ url: 'company/GetImages.action', scope: this, success: function(response,opts) { console.log('GET IMAGES'); } }); } }); } } }, { xtype: 'tbseparator' }, { xtype: 'button', text: 'Reset', handler: function() { this.up('form').getForm().reset(); } } ] } ] } ] } ], dockedItems: [ { xtype: 'toolbar', width: 150, region: 'east', dock: 'bottom', items: [ { xtype: 'tbspacer', height: 17, width: 385 }, { xtype: 'button', height: 42, width: 56, text: 'Save', action: 'btn-companyadd-data' }, { xtype: 'tbseparator' }, { xtype: 'button', height: 42, width: 56, text: 'Cancel', action: 'btn-cancel-data' } ] } ] }); me.callParent(arguments); }});I am able to get the server response after the file has been uploaded. But the problem is how can I display the uploaded file to the image place marked above.Yogendra SinghSr. ProgrammerKintudesigns.com

mitchellsimoens
22 Mar 2012, 6:56 AM
You can return the path to the image and show the image based on that path.

rushi2440
22 Mar 2012, 11:15 PM
@mitchellsimoens

thanks for your response. I am able to get the image path as the server side response, but I am not able to set the image to my Image src.

So how can I set the image path available as response to my image field source.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

mitchellsimoens
23 Mar 2012, 4:26 AM
If you use Ext.Img you can use the setSrc method to update the image path.

rushi2440
28 Mar 2012, 9:49 PM
still same problem not able to show image to my xtype image below is my code for the form with item image

items: [
{
xtype: 'form',
frame: true,
itemId: 'logoform',
id: 'logoform',
height: 320,
width: 375,
bodyPadding: 10,
preventHeader: true,
title: 'My Form',
items: [
{
xtype: 'image',
height: 158,
itemId: 'cmplogoimg',
margin: 10,
width: 287,
src:'http://www.sencha.com/img/sencha-large.png'
}]
}
]


I am not able to set the src to the data available to me from json i.e

{
"companydata": [{
"cmpname": "Kintu Designs Pvt ltd",
"cmptitle": "Kintu Designs Pvt ltd",
"cmpdesc": "<b>?Kintu Designs Pvt ltd</b>",
"cmpfax": "8128812153",
"cmpcontact": "8128812153",
"cmpwebsite": "www.kintudesigns.com",
"cmpemail1": "[email protected]",
"cmpemail2": "[email protected]",
"cmpcountry": "India",
"cmpstate": "Gujarat",
"cmpcity": "Surat",
"cmpaddress": "Kintu Designs Pvt ltd Nanpura Timalyawad",
"cmplogo": "calendar.png",
"cmplogopath": "upload/images/",
"cmpcreatedby": 1,
"cmpcreatedon": 1200094446000,
"cmpmodifiedon": 1200094446000,
"cmpmodifiedby": 0,
"id": 1
}],
"total": 1,
"success": true
}


with the combination of cmplogopath and cmplogoI am able to show the image to my grid, but don't able to set the src of my xtype:image in the form code given above.

I just want my image to be displayed there with the src as the combination of cmplogopath and cmplogo available from the json data

Yogendra Singh
Sr. Programmer
Kintudesigns.com

asifshaikh
29 Mar 2012, 3:06 AM
how i set window frame true from function not from frame:true; in extjs 4?

rushi2440
29 Mar 2012, 8:42 PM
Hi,

anybody can help with this problem?

thanks a lot.


Yogendra Singh
Sr. Programmer
Kintudesigns.com