在我的界面中，我有3个按钮，分别是'添加'，'保存'和'取消'以及编辑器网格面板。现在，如果用户添加或编辑记录并尝试保存但不小心点击了取消按钮，则所有应该更改和保存的记录将自动保持不变。
我的问题是如何在取消按钮上放置一个确认框，只有在记录中有更改时才会显示该确认框？
这是我到目前为止所尝试的：
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();
// console.log(objectModified);
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;
//all fields are null, then prompt that it should be filled-in (for edit)
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 record to save",
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(){
Ext.getCmp('maingrid').getStore().reload();
Ext.getCmp('b_save').disable();
Ext.getCmp('b_cancel').disable();
}
}
],
bbar: pager
});
答案 0 :(得分：2)
您可以使用Ext.data.Store getModifiedRecords()和getRemovedRecords()方法来检测网格存储是否包含更改。要显示确认对话框，您可以使用Ext.MessageBox.confirm()方法，然后仅在用户单击“是”按钮时重新加载存储。
var store = Ext.getCmp('maingrid').getStore();
var modified = store.getModifiedRecords();
var removed = store.getRemovedRecords();
if (modified.length || removed.length) {
Ext.MessageBox.confirm('Cancel', 'Do you want cancel changes?', function(btnId) {
if (btnId == 'yes') {
store.reload();
Ext.getCmp('b_save').disable();
Ext.getCmp('b_cancel').disable();
}
});
}