0
当我删除任何当前行时，下一行和分页必须在空行中更新。但它没有更新分页，但是网址正确传递到网络中。当我刷新页面时，空行被替换为下一行。删除行不更新网格？ Sencha Extjs应用程序
List.js： /** * 这一观点的人的例子名单。 */
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',
// },
});
商店：
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: "[email protected]", phone: "555-111-1111" },
// { name: 'Worf', email: "[email protected]", phone: "555-222-2222" },
// { name: 'Deanna', email: "[email protected]", phone: "555-333-3333" },
// { name: 'Data', email: "[email protected]", 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 /** * 这个类是用于应用程序的主视图中的控制器。它被指定为 *主视图类的“控制器”。 * * TODO - 将此视图的此内容替换为适合您应用程序的需求。 */
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
