i'm very sorry, that you're confused.
let me explain it.
I have a grid with a header. In the header there is a button called 'delete row'.
when i click on a row in my grid and then press the 'delete row' button the row will get deleted from my database.
i have a waiting message that says "deleting please wait...". after it's done i get a message that says 'data deleted' and i can press ok.
this is the code for the header, button and the action when i press the button
var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead, [{
text: 'Delete Row',
handler: function() {
selectedRow = grid.getSelectionModel().getSelected();
if(selectedRow) {
gridForm.submit(
{
waitMsg: 'Deleting row, please wait...',
url:'delete.php?id='+selectedRow.data.id,
params:{rowid:selectedRow.data.id},
success: function (form, action) {
ds.remove(selectedRow);
Ext.Msg.show({
title:'Confirmation',
msg: 'Data Successfully Deleted.',
buttons: Ext.Msg.OK
})
},
failure: function(form, action) {Ext.Msg.show({
title:'Confirmation',
msg: 'Something Went Wrong, Please Try Again.',
buttons: Ext.Msg.OK,
})
}
}
);
}
}
}]);
according to you guys it's still not 100% sure that the record is deleted from my database. you suggested this
success: function (form, a) {
if( a.result.success == 'true' ) {
ds.remove(selectedRow);
Ext.Msg.show({
title:'Confirmation',
msg: 'Data Successfully Deleted.',
buttons: Ext.Msg.OK
})
} else {
Ext.Msg.alert('something went wrong! Please try again!');
}
}
if i do that firebug gives me in error: a.result is undefined
it also says
a.result has no properties
http://localhost/test/sample.js
Line 185
your #3. It takes forever to load the response on delete.php.
the record is deleted from my database but the message that the records is deleted is not showing.
Ext.Msg.show({
title:'Confirmation',
msg: 'Data Successfully Deleted.',
buttons: Ext.Msg.OK
})
this is my whole js file
var GridUI = function() {
//enable Quicktips
Ext.QuickTips.init();
//set vars
var ds; //datastore for grid
var cm; //columnModel
var grid; //component
var dsContext;
var gridForm;
var fm = Ext.form, Ed = Ext.grid.GridEditor; // shorthand alias
function formatDate(value){
return value ? value.dateFormat('Y-m-d') : '';
};
function renderStatusDisplay(value, p, r)
{
return String.format('<img id="mb4" style="cursor:pointer" src="grid/cross.png" alt="cross.png" />',value);
}
function formatBoolean(value) {
return [
'<img ', // give the checkbox image a css class of "checkbox"
'src="grid/',
value? 'checked.gif' : 'unchecked.gif',
'"/>'
].join("");
};
//create the datastores
function setupDataSource() {
//create the Data Store for the grid
ds = new Ext.data.Store({
//set the http-proxy (link to the php document)
proxy: new Ext.data.ScriptTagProxy({
url: 'sample.php?ac=showData' //a function in your php-script must be activated when ac = showdata
}),
//set up the JsonReader
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name:'id',mapping:'id'},
{name: 'name', type: 'string', mapping: 'name'},
{name: 'description', type: 'string', mapping: 'description'},
{name: 'due', type: 'date', mapping: 'due'},
{name: 'amount', type: 'string', mapping: 'amount'},
{name: 'paid', type:'boolean', mapping: 'paid'},
{name: 'paid_when', type: 'date', mapping: 'paid_when'} //columnmapping
]),
filters: [
{type: 'string', dataIndex: 'name'},
{type: 'string', dataIndex: 'description'},
{type: 'date', dataIndex: 'due'},
{type: 'string', dataIndex: 'amount'},
{type: 'boolean', dataIndex: 'paid'},
{type: 'date', dataIndex: 'paid_when'}
],
});
//load datastores
ds.load();
}
//create the columnmodel
function getColumnModel() {
cm = new Ext.grid.ColumnModel([
{header: "#",
width: 30,
renderer:function(v, p, r, rowIndex, i, ds){return '' + (rowIndex+1)}
},
{
header: "Names",
dataIndex: 'name',
width: 150,
editor: new Ed(new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'post',
lazyRender:true
}))
},{
header: "Description",
dataIndex: 'description',
width: 150,
editor: new Ed(new fm.TextField({
allowBlank: true,
maxLength: 50
}))
},{
header: "Due",
dataIndex: 'due',
width: 75,
renderer: formatDate,
editor: new Ed(new fm.DateField({
format: 'Y-m-d',
minValue: '2001-01-01',
}))
},{
header: "Amount",
dataIndex: 'amount',
width: 75,
renderer: Ext.util.Format.usMoney,
editor: new Ed(new fm.TextField({
allowBlank: true,
maxLength: 50
}))
},{
header: "Paid",
dataIndex: 'paid',
width: 50,
renderer: formatBoolean,
editor: new Ed(new fm.Checkbox())
},{
header: "Paid When",
dataIndex: 'paid_when',
width: 75,
renderer: formatDate,
editor: new Ed(new fm.DateField({
format: 'Y-m-d',
minValue: '2001-01-01',
}))
},
{
header: "Delete",
width: 45,
renderer: renderStatusDisplay
}
]);
//set the default for sorting the columns
cm.defaultSortable = false;
return cm;
}
//create the grid
function buildGrid() {
//create the form
var gridForm = new Ext.form.Form({});
//create the grid
var grid = new Ext.grid.EditorGrid('editor-grid', {
ds: ds,
cm: getColumnModel(),
enableColLock:false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
clicksToEdit:2,
listeners: { // add a cellclick listener to the grid
cellclick: function(o, row, cell, e) {
// ensure mouseclick occurred within checkbox icon's visible area
if (o.getColumnModel().getDataIndex(cell) == 'paid' && e.getTarget('.checkbox', 1)) {
var rec = o.getDataSource().getAt(row);
rec.set('paid', !rec.get('paid')); // toggle "indoor" value
}
}
},
loadMask: true
});
//set the layout for the grid
var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');
//render the grid
grid.render();
//set the header
var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead, [{
text: 'Delete Row',
handler: function() {
selectedRow = grid.getSelectionModel().getSelected();
if(selectedRow) {
gridForm.submit(
{
waitMsg: 'Deleting row, please wait...',
url:'delete.php?id='+selectedRow.data.id,
params:{rowid:selectedRow.data.id},
success: function (form, a) {
if( a.result.success == 'true' ) {
ds.remove(selectedRow);
Ext.Msg.show({
title:'Confirmation',
msg: 'Data Successfully Deleted.',
buttons: Ext.Msg.OK
})
} else {
Ext.Msg.alert('something went wrong! Please try again!');
}
} ,
failure: function(form, action) {Ext.Msg.show({
title:'Confirmation',
msg: 'Something Went Wrong, Please Try Again.',
buttons: Ext.Msg.OK
})
}
}
);
}
}
}]);
var gridFoot = grid.getView().getFooterPanel(true);
var Foot = new Ext.Toolbar(gridFoot);
//activate function updateDB when a cell is edited
grid.on('afteredit', updateDB);
function updateDB(oGrid_event){
gridForm.submit(
{
waitMsg: 'Saving changes, please wait...',
url:'sample.php?ac=saveData&field='+oGrid_event.field+'&row='+oGrid_event.row+'&value='+oGrid_event.value, //php function that saves the data
success:function(form, action) {Ext.Msg.show({
title:'Confirmation',
msg: 'Data Successfully Saved.',
buttons: Ext.Msg.OK
})
},
failure: function(form, action) {Ext.Msg.show({
title:'Confirmation',
msg: 'Something Went Wrong, Please Try Again.',
buttons: Ext.Msg.OK,
})
}
}
);
}
//render form
gridForm.render('editGrid');
}
return {
//the init
init : function() {
setupDataSource();
buildGrid();
},
getDataSource: function() {
return ds;
}
}
}();
Ext.onReady(GridUI.init, GridUI, true);