How to pass parameter value from view to Ext.window? - extjs

Question

I am get confused to pass value from view to window,
I have a view contain the user info and one button on which click a new window opens to upload an Image file. the image upload code I done in window. But I want to pass User Id with the image which I want to post on server. the user Id I on View. I want to carry that userId on file upload window. How can I do this?
Bellow is my code.
file upload view
Ext.define('vDemo.view.FileUpload', {
extend: 'Ext.Panel',
region: 'center',
border:'false',
initComponent: function () {
var me = this;
this.form = new Ext.form.Panel({
xtype: 'panel',
border: false,
//layout: 'vbox',
padding: '2 2 2 2',
bodyPadding: 10,
frame: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
}],
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function (fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});
this.items = [this.form];
this.callParent();
}
});
UserForm view (on which button click I am open the file upload window)
Ext.define('vDemo.view.userHome', {
extend: 'Ext.Panel',
border: false,
Padding: '5 5 5 5',
title: 'Home',
initComponent: function () {
var me = this;
this.changingImage = Ext.create('Ext.Img', {
src:'', //'appRes/ProfilePic/ProfilePic1.png',
width: 150,
height: 170
});
this.image = new Ext.Container({
cls: 'img-block',
padding:'0 0 2 0',
items: [this.changingImage]
});
this.ImagePanel = new Ext.form.Panel({
padding: '5 5 5 5',
layout: 'vbox',
border: false,
items: [
this.image,
{
xtype: 'button',
text: 'Chage Image',
width: 150,
height: 30,
handler: function () {
me.fileUpload();
}
}
]
});
this.InfoPanel = new Ext.form.Panel({
padding: '5 5 5 5',
layout: 'vbox',
border: false,
items: [{
xtype: 'hidden',
name: 'hfUserAutoId'
},
{
xtype: 'displayfield',
fieldLabel: 'Name:',
name: 'lblName',
value: ''
},
{
xtype: 'displayfield',
fieldLabel: 'Email:',
name: 'lblEmail',
value: ''
},
{
xtype: 'displayfield',
fieldLabel: 'Date of Birth:',
name: 'lblDateOfBirth',
value: ''
},
{
xtype: 'displayfield',
fieldLabel: 'UserId',
name: 'lblUserId',
value: ''
},
{
xtype: 'displayfield',
fieldLabel: 'Gender',
name: 'lblGender',
value: ''
},
{
xtype: 'displayfield',
fieldLabel: 'Blood Group',
name: 'lblBloodGroup',
value: ''
},
{
xtype: 'displayfield',
fieldLabel: 'Hieght',
name: 'lblHieght',
value: ''
}]
});
this.form = new Ext.form.Panel({
padding: '10 100 10 100',
layout: 'hbox',
header: {
titlePosition: 0,
items: [{
xtype: 'button',
text: 'Back',
handler: function () {
me.fireEvent('getBack');
}
}]
},
items: [me.ImagePanel, this.InfoPanel]
});
this.items = [this.form];
this.callParent();
},
fillForm: function(sRec) {
var me = this;
console.log(sRec);
// var sRec1 = Ext.StoreMgr.lookup('UserInfo').getById(ssRec.get('userAutoId'));
console.log(sRec[0].userAutoId);
me.form.getForm().findField('hfUserAutoId').setValue(sRec.userAutoId);
me.form.getForm().findField('lblName').setValue(sRec[0].firstName + " " + sRec[0].lastName);
me.form.getForm().findField('lblUserId').setValue(sRec[0].userid);
me.form.getForm().findField('lblEmail').setValue(sRec[0].email);
if (sRec[0].gender == true) {
me.form.getForm().findField('lblGender').setValue("Male");
}
else if (sRec[0].gender == false) {
me.form.getForm().findField('gender').setValue("Female");
};
me.form.getForm().findField('lblDateOfBirth').setValue(sRec[0].DOB);
me.form.getForm().findField('lblBloodGroup').setValue(sRec[0].bloodGroup);
me.form.getForm().findField('lblHieght').setValue(sRec[0].hieght);
// me.form.getForm().findField('image').setSrc(sRec.get('profilePicPath'));
me.changingImage.setSrc(sRec[0].profilePicPath);
},
fileUpload: function () {
this.uploadWinPanel = new vDemo.view.FileUpload({});
var hfUserAutoId = me.form.getForm().findField('hfUserAutoId').getValue();
this.EditWin = new Ext.Window({
//header:false,
Height: 400,
width: 320,
title: 'Upload Photo',
border: 0,
resizable: false,
draggable: false,
modal: false,
items: [this.uploadWinPanel]
}).show();
}
});

Answer 1

Well, you pass the user id on initialization of the uploadWinPanel like so:
var hfUserAutoId = me.form.getForm().findField('hfUserAutoId').getValue();
this.uploadWinPanel = new vDemo.view.FileUpload({
userId: hfUserAutoId
});
And then in the FileUpload component, beside the filefield, you add a hiddenfield which grabs the userId value:
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
},{
xtype: 'hiddenfield',
name: 'user_id',
value: this.userId
}]