In my UI, I have an EditorGridPanel and a three buttons namely: 'add','save' and 'cancel'. Currently, whenever I want to edit the existing data in my grid and click the save button, automatically it will update the data and that is my problem. I want is to add an alert message box saying 'Do you want to save changes?' If YES, proceed in executing save function. If NO, return the data on its original form before updating the data in the Grid.
Could someone help me about this?
This are my codes:
test.js
var grid = new Ext.grid.EditorGridPanel({
id: 'maingrid',
store: store,
cm: cm,
width: 785.5,
anchor: '100%',
height: 700,
frame: true,
loadMask: true,
waitMsg: 'Loading...',
clicksToEdit: 2,
tbar: [
'->',
{
text: 'Add',
iconCls: 'add',
id: 'b_add',
disabled: true,
handler : function(){
var Put = grid.getStore().recordType;
var p = new Put({
action_take: 'add',
is_active: '',
allowBlank: false
});
Ext.getCmp('b_save').enable();
Ext.getCmp('b_cancel').enable();
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 1);
}
},'-',{
text: 'Save',
iconCls: 'save',
id: 'b_save',
disabled: true,
handler : function(){
var objectStore = Ext.getCmp("maingrid").getStore();
var objectModified = objectStore.getModifiedRecords();
var customer_id = Ext.getCmp("maingrid").getStore().baseParams['customer_id'];
var objectData = new Array();
var dont_include;
if(objectModified.length > 0)
{
for(var i = 0; i < objectModified.length; i++)
{
dont_include = false;
if(objectModified[i].data.id
&&
(
(objectModified[i].data.firstname == undefined || objectModified[i].data.firstname == null|| objectModified[i].data.firstname == '')
||
(objectModified[i].data.lastname == undefined || objectModified[i].data.lastname == null|| objectModified[i].data.lastname == '')
||
(objectModified[i].data.email_address == undefined || objectModified[i].data.email_address == null|| objectModified[i].data.email_address == '')
)
)
{
Ext.Msg.show({
title: 'Warning',
msg: "Input value required.",
icon: Ext.Msg.WARNING,
buttons: Ext.Msg.OK
});
return;
}
else//no id, means new record
{
//all fields are not filled-in, just do nothing
if((objectModified[i].data.firstname == undefined || objectModified[i].data.firstname == null|| objectModified[i].data.firstname == '')&&
(objectModified[i].data.lastname == undefined || objectModified[i].data.lastname == null|| objectModified[i].data.lastname == '')&&
(objectModified[i].data.email_address == undefined || objectModified[i].data.email_address == null|| objectModified[i].data.email_address == ''))
{
//boolean flag to determine whether to include this in submission
dont_include = true;
}
//either one field is not filled-in prompt to fill in all fields
else if((objectModified[i].data.firstname == undefined || objectModified[i].data.firstname == null|| objectModified[i].data.firstname == '')||
(objectModified[i].data.lastname == undefined || objectModified[i].data.lastname == null|| objectModified[i].data.lastname == '')||
(objectModified[i].data.email_address == undefined || objectModified[i].data.email_address == null|| objectModified[i].data.email_address == ''))
{
Ext.Msg.show({
title: 'Warning',
msg: "Input value required.",
icon: Ext.Msg.WARNING,
buttons: Ext.Msg.OK
});
return;
}
}
//the data for submission
if(!dont_include)
{
objectData.push({
firstname: objectModified[i].data.firstname,
lastname: objectModified[i].data.lastname,
email_address: objectModified[i].data.email_address,
id: objectModified[i].data.id,
customer_id: customer_id
});
}
}
// console.log(objectData)
// return;
//check if data to submit is not empty
if(objectData.length < 1)//empty
{
Ext.Msg.show({
title: 'Warning',
msg: "No records to be saved",
icon: Ext.Msg.WARNING,
buttons: Ext.Msg.OK
});
Ext.getCmp('maingrid').getStore().reload();
return;
}
// return;
Ext.Msg.wait('Saving Records...');
Ext.Ajax.request({
timeout:900000,
params: {objdata: Ext.encode(objectData)},
url: '/index.php/SaveContent',
success: function(resp){
var response = Ext.decode(resp.responseText);
Ext.Msg.hide();
if(response.success == true){
Ext.Msg.show({
title: "Information",
msg: response.msg,
buttons: Ext.Msg.OK,
icon: Ext.Msg.INFO,
fn: function(btn){
Ext.getCmp('maingrid').getStore().reload();
Ext.getCmp('b_save').disable();
Ext.getCmp('b_cancel').disable();
}
});
}else{
Ext.Msg.show({
title: "Warning",
msg: response.msg,
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING
});
}
},
failure: function(resp){
Ext.Msg.hide();
Ext.Msg.show({
title: "Warning1",
msg: response.msg,
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING
});
}
});
}
else{
Ext.Msg.show({
title: 'Warning',
msg: "No changes made.",
icon: Ext.Msg.WARNING,
buttons: Ext.Msg.OK
});
}
}
},'-',
{
text: 'Cancel',
iconCls: 'cancel',
id: 'b_cancel',
disabled: true,
handler : function(){
var store = Ext.getCmp('maingrid').getStore();
var modified = store.getModifiedRecords();
if (modified.length) {
Ext.MessageBox.confirm('Cancel', 'There are records not yet saved. Are you sure you want to cancel the changes?', function(btnId) {
if (btnId == 'yes') {
store.reload();
Ext.getCmp('b_save').disable();
Ext.getCmp('b_cancel').disable();
}
});
}
}
}
],
bbar: pager
});
actions.class.php
public function executeSaveContent(sfWebRequest $request){
$save_data = json_decode($request->getParameter("objdata"));
$count_array = count($save_data);
$id_insession = $_SESSION['employee_id'];
if($count_array > 0){
foreach($save_data as $k => $v){
$id = strip_tags($v->id);
$firstname = preg_replace("/\s+/", " ", $v->firstname);
$firstname = ltrim(addslashes(strip_tags($firstname)));
$firstname = rtrim($firstname);
$lastname = preg_replace("/\s+/", " ", $v->lastname);
$lastname = ltrim(addslashes(strip_tags($lastname)));
$lastname = rtrim($lastname);
$email_address = preg_replace("/\s+/", " ", $v->email_address);
$email_address = ltrim(addslashes(strip_tags($email_address)));
$email_adsress = rtrim($email_address);
$customer_id = $v->customer_id;
$action = ''; //strip_tags($v->action);
if(empty($id))
{
$action='add';
}
else {
$action='edit';
}
if(!empty($firstname)||($lastname)||($email_address)){
$sql_check = "select firstname,lastname,email_address
from
customer_saver
";
if($action == "edit"){
$sql_check .= " where
firstname = '$firstname'
and
id not in ($id)";
}
if($action == "add"){
$sql_check .= " where
firstname = '$firstname'
";
}
}
$setpath = _appContract::SchemaChange('contract_arbill');
$this->conn->execute($setpath);
$result_check = $this->conn->fetchAll($sql_check);
foreach($result_check as $v){
$fetch_firstname = $this->formatString($v['firstname']);
$fetch_lastname = $this->formatString($v['lastname']);
$fetch_email_address= $v['email_address'];
}
$result_check_count = count($result_check);
if($action == "edit"){
if($result_check_count == 0){
$sql = "update
customer_saver
set
firstname = '$firstname',
lastname = '$lastname',
email_address = '$email_address'
where
id = $id";
}
else{
$resp['success'] = false;
$resp['msg'] = "Duplicate entry found. <br>
First name: <b>".$firstname."</b> Last name: <b>".$lastname."</b> Email Address: <b>".$email_address."</b>";
die(json_encode($resp));
}
}
elseif($action == "add"){
if(empty($id) && $result_check_count == 0){
$sql = "insert into
customer_saver
(firstname, lastname, email_address,customer_id)
values
('$firstname', '$lastname', '$email_address', $customer_id)";
}
else{
$resp['success'] = false;
$resp['msg'] = "Duplicate entry found. <br>
First Name: <b>".$firstname."</b> Last Name: <b>".$lastname."</b> Email Address: <b>".$email_address."</b>";
die(json_encode($resp));
}
}
try{
$this->conn->execute($setpath);
$this->conn->execute($sql);
}catch(Exception $e){
die($e->getMessage());
}
}
$resp['success'] = true;
$resp['msg'] = "Successfully saved the record.";
die(json_encode($resp));
}
}