Deleting the row is not updating the grid? Sencha Extjs Application - extjs

Question

When I delete any current row, the next row and pagination has to get updated in the empty row. But it is not updating the pagination but the url is passing in network correctly. When I refresh the page, the empty row is replaced by the next row.
List.js:
/**
* This view is an example list of people.
*/
Ext.define('CRUD.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'home',
requires: [
'CRUD.store.Personnel',
'CRUD.view.main.MainController',
'Ext.toolbar.Paging',
],
title: 'Heroes',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
layout: 'fit',
fullscreen: true,
store: {
type: 'personnel',
},
selModel: {
pruneRemoved: false
},
selType: 'cellmodel',
columns: [{
text: 'Name',
align: 'center',
dataIndex: 'name',
sortable: true,
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true,
allowBlank: false
}
},
{
text: 'Email',
align: 'center',
dataIndex: 'email',
sortable: true,
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true,
allowBlank: false
}
},
{
text: 'Phone',
align: 'center',
dataIndex: 'phone',
sortable: true,
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true,
allowBlank: false
}
},
{
text: 'Save',
align: 'center',
xtype: 'actioncolumn',
items: [{
icon: 'http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Actions-document-edit-icon.png',
xtype: 'submit',
handler: function(grid, rowIndex, colIndex, item, e, record) {
Ext.Msg.confirm("Confirmation", "Do you want to Save?", function(btnText) {
if (btnText === "yes") {
Ext.Ajax.request({
url: 'http://localhost:8080/edit?id=' + record.data.id + '&name=' + record.data.name + '&email=' + record.data.email + '&phone=' + record.data.phone,
method: 'POST', //this is the url where the form gets submitted
useDefaultXhrHeader: false,
success: function(response) {
store.load()
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action);
}
});
}
});
}
}],
}, {
text: 'Delete',
xtype: 'actioncolumn',
align: 'center',
items: [{
icon: 'http://www.freeiconspng.com/uploads/delete-button-png-27.png',
xtype: 'submit',
// handler: function(grid, rowIndex, colIndex, item, e, record) {
// console.log(record.data.id)
// // Ext.Msg.confirm('Confirmation', 'Are you sure?', function(btnText) {
// // if (btnText === 'yes') {
// // Ext.Ajax.request({
// // url: 'http://localhost:8080/del/' + record.data.id,
// // method: 'DELETE', //this is the url where the form gets submitted
// // useDefaultXhrHeader: false,
// // cors: true,
// // success: function(form, action) {
// // store.load()
// // },
// // failure: function(form, action) {
// // Ext.Msg.alert('Failed', action);
// // }
// // });
// // }
// // })
// }
}],
listeners: {
click: 'onDeleteClick'
}
}
],
bbar: Ext.create('Ext.PagingToolbar', {
xtype: 'pagingtoolbar',
displayInfo: true,
doRefresh: function() {
this.doLoad(this.cursor);
},
}),
// columns: [
// { text: 'Name', dataIndex: 'name', flex: 1 },
// { text: 'Email', dataIndex: 'email', flex: 1 },
// { text: 'Phone', dataIndex: 'phone', flex: 1 }
// ],
// listeners: {
// select: 'onItemSelected',
// },
});
Store:
Ext.define('CRUD.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
model: 'CRUD.model.User',
fields: [
'name', 'email', 'phone'
],
// data: [
// { name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
// { name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
// { name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
// { name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
// ],
autoLoad: { offset: 0, limit: 5 },
pageSize: 5,
proxy: {
type: 'ajax', //cross domain calls - json parser
enablePaging: true,
url: 'http://localhost:8080/list',
useDefaultXhrHeader: false,
startParam: 'offset',
limitParam: 'limit',
reader: {
totalProperty: 'total',
rootProperty: 'items'
},
listeners: {
//this is used to construct the proxy url before the load is done
// beforeload: {
// fn: function() {
// var me = this;
// me.updateProxyURL(); //write this function yourself
// }
// }
}
},
// proxy: {
// type: 'memory',
// reader: {
// type: 'json',
// }
// },
});
Controller.js
/**
* This class is the controller for the main view for the application. It is specified as
* the "controller" of the Main view class.
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('CRUD.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
store: {
type: 'personnel',
},
onClick: function(grid) {
Ext.Msg.alert("tesdt")
},
onDeleteClick: function(selModel, record, index, options, grid, store) {
//Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
Ext.Msg.confirm({
title: 'Confirm',
msg: 'Are you sure?',
buttons: Ext.Msg.OKCANCEL,
fn: this.onConfirm,
icon: Ext.MessageBox.QUESTION,
config: {
grid: grid,
action: 'del',
store: store
}
});
},
onConfirm: function(btn, text, opt) {
console.log(opt.config.action)
if (btn === 'ok') {
//
opt.config.grid.item.remove();
Ext.Ajax.request({
url: 'http://localhost:8080/' + opt.config.action + '/' + opt.config.grid.record.data.id,
// method: 'DELETE', //this is the url where the form gets submitted
useDefaultXhrHeader: false,
success: function(form, action) {
opt.config.store.load({
start: 0,
limit: 5
})
},
failure: function(form, action) {
},
listeners: {
doRefresh: function() {
this.doLoad(this.cursor);
},
}
});
}
}
});
Please find the screenshot here

Answer 1

Doing grid.getStore().reload() should be sufficient.
BTW. The doRefresh listener is weird. Are you sure you wanted this as Ext.Ajax.request config? This doesn't make sense to me.