Ext JS for Edit Profile

[vijayakumari]

I am presently working on edit profile of the site and using extjs FormPanel for the purpose.

I got the data needed for the edit profile in a data store which is given below.
var editprofilestore=new Ext.data.Store({
autoLoad: false,
proxy:new Ext.data.HttpProxy({url:'http://localhost/exthealthlearn/js/geteditprofile.php'}),
reader:new Ext.data.JsonReader({totalProperty: 'total',root:'results',id:'id',fields: ['id','first_name']}),
remoteSort: false
});
editprofilestore.load();

and also prepare the form for the edit profile which is given below. how to map the data which i got from the datastore to the form which i prepared...can u plz help me out....:-?

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var myForm = new Ext.FormPanel({
labelWidth: 95,
url:'insertregister.php' (http://extjs.com/forum/'insertregister.php'),
frame:true,
title: 'My Profile',
bodyStyle:'padding:5px 5px 0',
width: 340,
height: 310,
style : 'margin:auto;',
defaults: {width: 200},
defaultType: 'textfield',
items: [
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'firstname',
id: 'firstname',
allowBlank:false,
tabIndex:1,
store:editprofilestore,
dataIndex:'first_name'
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'lastname',
id: 'lastname',
allowBlank:false,
tabIndex:2
}),
new Ext.form.ComboBox({
store: hospitalstore,
forceSelection:true,
id:'combo',
fieldLabel: 'Hospital',
name: 'combo',
loadingText:'Select Hospital',
displayField:'name',
valueField:'hid',
hiddenName:'hospitalid',
mode:'remote',
triggerAction:'all',
emptyText:'Select Hospital',
editable:false,
allowBlank:false,
width:110,
maxHeight:150,
tabIndex:3,
listeners:{
select:{fn:function(combo, value) {
var comboDept = Ext.getCmp('combo-department');
var comboManager = Ext.getCmp('combo-manager');
comboDept.clearValue();
comboManager.clearValue();
comboDept.store.filter('hid', combo.getValue());
comboManager.store.filter('hid', combo.getValue());
}}
}
}),
new Ext.form.ComboBox({
store: managerstore,
id:'combo-manager',
fieldLabel: 'Manager',
name: 'combo-manager',
loadingText:'Select Manager',
displayField:'name',
valueField:'id',
hiddenName:'managerid',
mode:'remote',
triggerAction:'all',
emptyText:'Select Manager',
editable:false,
allowBlank:false,
width:110,
maxHeight:150,
tabIndex:4
}),
new Ext.form.ComboBox({
store: departmentstore,
id:'combo-department',
fieldLabel: 'Department',
name: 'combo-department',
loadingText:'Select Department',
displayField:'name',
valueField:'id',
hiddenName:'departmentid',
mode:'remote',
triggerAction:'all',
emptyText:'Select Department',
editable:false,
allowBlank:false,
width:110,
maxHeight:150,
tabIndex:5
}),
new Ext.form.TextField({
fieldLabel: 'Position',
name: 'position',
id: 'position',
allowBlank:false,
tabIndex:6
}),
new Ext.form.NumberField({
fieldLabel: 'Phone Number',
name: 'phoneno',
id: 'phoneno',
allowBlank:false,
tabIndex:7
}),
new Ext.form.TextField({
fieldLabel: 'Email Address',
name: 'emailid',
id: 'emailid',
vtype:'email',
allowBlank:false,
tabIndex:8
}),
new Ext.form.TextField({
fieldLabel: 'Password',
inputType:'password',
name: 'password',
id: 'password',
allowBlank:false,
tabIndex:9
})],

buttons: [{
text: 'Update',
handler : function(){
myForm.getForm().submit({
waitMsg: 'Please Wait....',
reset: true,
method : 'POST',
success: function () {
window.location.replace("./messageconfirmation.php?val=true");
},
failure: function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Registration Failed!', obj.errors.reason);
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
}
myForm.getForm().reset(); },
clientValidation : true
});
}
},{
text: 'Reset',
handler : function(){
myForm.getForm().reset();
}
}]
});
// editprofilestore.on('load', function() {
// firstname.setValue(editprofilestore.getAt(0).data.first_name);
// });
myForm.render('editregisterdiv');
});