Prompt an alert message box in Extjs
Question
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));
}
}
1 answers
solution1
2 ACCPTED 2014-02-12 12:09:02
For displaying confirmation dialog you can use Ext.MessageBox.confirm() method.
Then if user click on Yes button you can call store.sync() method or process your own changes saving.
If user click on No button you can call Ext.data.Store rejectChanges() method. This method rejects outstanding changes on all modified records and re-insert any records that were removed locally.
{
text: 'Save',
iconCls: 'save',
id: 'b_save',
disabled: true,
handler : function(){
var store = Ext.getCmp("maingrid").getStore();
Ext.MessageBox.confirm('Save changes', 'Do you want save changes?', function(btnId) {
if (btnId == 'yes') {
// Your current save button handler code
} else {
store.rejectChanges();
}
});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
ExtJs 4.2 nested prompt message box
extjs message box show
Make a Prompt box create an alert
ExtJs Message box sliding of message
displaying message in alert box
Javascript message alert box
Alert box message to be displayed in one line
How to display an image in alert/message box in jsp
How to center the message inside an alert box in JavaScript?
Specify font size of javascript alert box message
Related Tags