ExtJs - populating data from database to grid using actioncolumn - extjs

Question

I have a grid with actionColumn and when I click on edit icon it should call the other form(already available) with data populated in to fields from database so that the user can edit and save it. I am new to Extjs please help
I tried with the following code but its not working:
myForm.getForm().load({
url: '/.RetrieveRecords',
params: { id: id},
method: 'POST',
waitMsg: 'Loading data...'
Here is my form1:
Ext.application({
name : 'extjs.com',
launch : function()
{
var myForm = Ext.create('Ext.form.Panel',
{
title: 'Registration Form',
id: 'form',
Layout: 'border',
border: 'true',
padding: 10,
bodyPadding: 30,
renderTo: Ext.getBody(),
defaultType: 'textfield',
items :
[
{fieldLabel: 'First Name', name: 'firstname', id: 'firstname',allowBlank: false, minLength: 2, maxLength:25, regex:/^[a-zA-Z]/},
{fieldLabel: 'Last Name', name: 'lastname', id: 'lastname', allowBlank: false, minLength: 2, maxLength:25},
{fieldLabel: 'Email', name: 'email', id: 'email',allowBlank: false, vType: 'email', msgTarget:'under'},
{fieldLabel: 'Mobile Number', name: 'mobilenumber', id: 'mobilenumber',allowBlank: false, minLength: 10, maxLength:10, regex:/^[7-9][0-9]{9}$/, regexText:"Invalid mobile number",msgTarget:"under"},
{
xtype: 'datefield',
fieldLabel: 'DOB'+'<span style="color:red;font-weight:bold" data-qtip="Required">*</span>',
name: 'dob',
id:'dob',
allowBlank: false,
value: '2 4 1978',
format: 'd m Y',
// value: new Date(),
maxValue: new Date(),
msgTarget:'side'
},
{
xtype:'radiogroup',
fieldLabel: 'Gender',
defaultType: 'radiofield',
anchor: '22.5%',
id:'gender1',
defaults:
{
flex: 1
},
layout: 'hbox',
items: [
{
boxLabel: 'Male',
name: 'rb',
inputValue: 'M',
checked: true
},
{
boxLabel: 'Female',
name: 'rb',
inputValue: 'F',
}]
},
{
xtype:'checkboxgroup',
fieldLabel: 'Known Technologies',
anchor: '50%',
id:'tech',
columns: 3,
vertical: true,
items:
[
{boxLabel: 'java', name: 'cb',inputValue: 'java', x:20, checked: true},
{boxLabel: 'c++', name: 'cb',inputValue: 'c++', x:20, checked: true},
{boxLabel: 'jsp', name: 'cb',inputValue: 'jsp', x:20, checked: false},
{boxLabel: 'javascript', name: 'cb',inputValue: 'javascript', checked: false},
{boxLabel: 'hadoop', name: 'cb',inputValue: 'hadoop', checked: false},
{boxLabel: 'spring', name: 'cb',inputValue: 'spring', checked: false}
]
},
{
xtype:'textarea',
fieldLabel: 'Hobbies',
name:'hobby',
id:'hobby',
anchor:'100%'
// padding:5
},
{
xtype:'fieldset',
title: 'Address',
collapsible:false,
items:
[
{
xtype:'combobox',
displayField:'cname',
valueField:'cid',
fieldLabel:'country'+'<span style =color:red;data-qtip="Required">*</span>',
queryMode:'local',
msgTarget: 'under',
name:'country',
id: 'country',
store: Ext.create('Ext.data.Store',{
fields:['cid','cname']
}),
listeners:
{
afterrender:function()
{
Ext.Ajax.request({
url:'./getRecords',
success: function(response)
{
var jarray = [];
jarray = Ext.JSON.decode(response.responseText);
Ext.getCmp('country').getStore().loadData(jarray);
},
failure: function(response)
{
Ext.Msg.alert('failed' + response.status);
}
});
},
change: function(a,b,c)
{
var countryID1 = Ext.getCmp('country').getValue();
Ext.Ajax.request({
url:'./getStates',
params:{countryID:countryID1},
success: function(response)
{
//alert(JSON.stringify(response));
var jarray = [];
jarray=Ext.JSON.decode(response.responseText);
Ext.getCmp('state').getStore().loadData(jarray);
},
failure: function(response)
{
Ext.Msg.alert('Failed' + response.status);
}
});
}
}
},
{
xtype:'combobox',
displayField:'sname',
valueField:'sid',
fieldLabel:'State',
name:'state',
id:'state',
queryMode:'local',
msgTarget: 'under',
store: Ext.create('Ext.data.Store',{
fields:['sid','sname']
}),
listeners:
{
change: function(a,b,c)
{
var StateID = Ext.getCmp('state').getValue();
Ext.Ajax.request({
url:'./getCities',
params: {StateID1:StateID},
success: function(response)
{
var jarray = [];
jarray = Ext.JSON.decode(response.responseText);
Ext.getCmp('city').getStore().loadData(jarray);
},
failure: function(response)
{
Ext.Msg.alert('failed' + response.status);
}
});
}
}
},
{
xtype:'combobox',
displayField:'cname',
valueField:'cid',
fieldLabel:'City',
name:'city',
id:'city',
queryMode:'local',
msgTarget: 'under',
store: Ext.create('Ext.data.Store',{
fields:['cid','cname','sid']
})
},
{
xtype:'textfield',
displayField:'PincodeName',
valueField:'pincodeID',
fieldLabel:'Pin-code',
id:'pincode',
allowBlank: false,
maskRe: /[0-9\-]/,
regex: /^[0-9]{3}(\-)?[0-9]{3}$/,
regexText:"invalid pincode",
msgTarget: 'under'
}
]
},
{
xtype:'fieldset',
title:'Education',
collasible: false,
items:
[
{
xtype:'combobox',
displayField:'QualificationName',
valueField:'QualificationID',
fieldLabel:'Qualification',
id:'qualification',
name:'qualification',
queryMode:'local',
msgTarget:'side',
store: Ext.create('Ext.data.Store',{
fields:['QualificationID','QualificationName'],
data:
[
{"QualificationID":"1","QualificationName":"B.Tech"},
{"QualificationID":"2","QualificationName":"Diploma"},
{"QualificationID":"3","QualificationName":"Advanced Diploma"}
]
}),
listeners:
{
change: function()
{
Ext.getCmp('DepartmentID').setVisible(true);
Ext.getCmp('PercentageID').setVisible(true);
}
}
},
{
xtype:'textfield',
name:'department',
id:'DepartmentID',
displayField:'Department',
valueField:'DeptID',
fieldLabel:'Department',
allowBlank: false,
hidden:true,
msgTarget: 'under'
},
{
xtype:'textfield',
name: 'percentage',
id: 'PercentageID',
displayField:'Percentage',
valueField:'PercentageID',
fieldLabel:'Percentage',
msgTarget: 'under',
regex:/^-?[0-9]{0,2}(\.[0-9]{1,2})?%?$|^-?(100)(\.[0]{1,2})?%?$/,
regexText:"invalid percentage",
hidden:true
}
]
}
],
buttons:
[
{text:'Submit',
handler: function()
{
var mail = Ext.getCmp('email').getValue();
var mnumber = Ext.getCmp('mobilenumber').getValue();
var gender = Ext.getCmp('gender1').getChecked()[0].inputValue;
var selection = [];
selection = Ext.getCmp('tech').getChecked();
var selections = "";
for(var i=0;i<selection.length;i++)
{
selections += selection[i].inputValue + " ";
}
var add = Ext.getCmp('country').getRawValue()+","+Ext.getCmp('state').getRawValue()+","+Ext.getCmp('city').getRawValue()+","+Ext.getCmp('pincode').getValue();
var edu = Ext.getCmp('qualification').getRawValue()+","+Ext.getCmp('DepartmentID').getValue()+","+Ext.getCmp('PercentageID').getValue();
var dob = Ext.getCmp('dob').getRawValue();
var hobby = Ext.getCmp('hobby').getValue();
var fname = Ext.getCmp('firstname').getValue();
var lname = Ext.getCmp('lastname').getValue();
//alert(this.up('form'));
var form = this.up('form').getForm();
if(form.isValid())
{
Ext.Ajax.request
({
url:'./Save_Records',
method: 'POST',
params: {mail1:mail,mnumber1:mnumber,gender2:gender,selections1:selections,add1:add,edu1:edu,dob1:dob,hobby1:hobby,fname1:fname,lname1:lname},
success: function(response)
{
Ext.Msg.alert("success" + response.status);
},
failure: function(response)
{
Ext.Msg.alert("failed" + response.status);
}
});
}
else
{
alert("Please fill in the form");
}
}
},
{
text:'Reset',
handler: function()
{
this.up('form').getForm().reset();
Ext.Ajax.request
({
url:'index.jsp',
method: 'POST',
success: function(response)
{
Ext.Msg.alert('Success' + " " + response.status);
},
failure: function(response)
{
Ext.Msg.alert('Failure' + " " + response.status);
}
});
}
}
]
});
}
});
Here is my Form2 with Actioncolumns:
Ext.onReady(function()
{
var store=Ext.create('Ext.data.Store',
{
autoload: true,
autosync: true,
data: [],
fields:
[
{name: 'firstname', id:'firstname'},
{name: 'email', id:'email'},
{name: 'mobileno', id:'mobileno'}
]
});
Ext.create('Ext.grid.Panel',
{
renderTo: Ext.getBody(),
height:150,
width:400,
x:200,
y:50,
store:store,
id: 'grid1',
columns:
[
{
header:'Firstname',
id:'firstname',
dataIndex:'firstname',
editor: {
xtype: 'textarea'
}
},
{
header:'Mobileno',
id:'mobileno',
dataIndex:'mobileno',
editor: {
xtype: 'textarea'
}
},
{
header:'Email',
id:'email',
dataIndex:'email',
editor: {
xtype: 'textarea'
}
},
{
header:'Action',
id:'action',
align:'center',
xtype:'actioncolumn',
sortable:false,
items:
[
{
icon:'images/view_icon.gif',
tooltip:'View',
handler: function(grid,rowIndex,colIndex)
{
var rec= grid.getStore().getAt(rowIndex);
}
},
{
icon:'images/edit_icon.gif',
tooltip:'Edit',
handler: function(grid,rowIndex,colIndex,e)
{
var rec= grid.getStore().getAt(rowIndex);
myForm.getForm().load({
// url: '/path/to/form/data',
params: { id: id},
method: 'POST',
waitMsg: 'Loading data...'
});
// Ext.Ajax.request(
// {
// url:'./RetrieveRecords',
// success: function(response)
// {
// Ext.Msg.alert("success" +" " + response.status);
// window.location.reload();
// },
// failure: function(response)
// {
// Ext.Msg.alert("failed" + response.status);
// }
// });
}
},
{
icon:'images/icons/cancel.png',
tooltip:'Delete',
handler: function(grid,rowIndex,colIndex)
{
var rec= grid.getStore().getAt(rowIndex);
var email = rec.get('email');
Ext.Ajax.request(
{
url:'./deleteRecords',
params:{email:email},
success: function(response)
{
Ext.Msg.alert("successfully deleted" +" " + response.status);
window.location.reload();
},
failure: function(response)
{
Ext.Msg.alert("failed" + response.status);
}
});
}
}
]
}
],
selType: 'cellmodel',
plugins:
[
Ext.create('Ext.grid.plugin.CellEditing',
{
clicksToEdit: 1
})
],
listeners:
{
afterrender:function()
{
Ext.Ajax.request(
{
params:{email:email},
url:'./RetrieveRecords',
success: function(response)
{
data = [];
data = Ext.JSON.decode(response.responseText);
Ext.getCmp('grid1').getStore().loadData(data);
},
failure: function(response)
{
Ext.Msg.alert("failure" + " " + response.status);
}
});
}
}
});
});

Answer 1

Try following as edit button:
handler: function(grid, rowIndex, colIndex, e) {
var rec = grid.getStore().getAt(rowIndex);
myForm.loadRecord(rec);
}