1
好了，所以我下面这个教程：http://existdissolve.com/2013/05/extjs-4-2-walkthrough-part-4-steppin-in-some-crud/ExtJS的删除记录使用笨
我使用笨作为后端，并从以下教程的ExtJS的。
这里是我的色彩控制器：
/**
* Generic controller for managing simple options
*/
Ext.define('CarTracker.controller.Options', {
extend: 'CarTracker.controller.Base',
stores: [
'option.Colors'
],
views: [
'option.List'
],
refs: [
{
ref: 'OptionList',
selector: '[xtype=option.list]'
}
],
init: function() {
this.listen({
component: {
'grid[xtype=option.list]': {
edit: this.save,
canceledit: this.cancel,
beforerender: this.loadRecords,
itemcontextmenu: this.showContextMenu
},
'grid[xtype=option.list] button#add': {
click: this.add
},
'grid[xtype=option.list] gridview': {
itemadd: this.edit
}
}
});
},
/**
* Displays context menu
* @param {Ext.view.View} view
* @param {Ext.data.Model} record
* @param {HTMLElement} item
* @param {Number} index
* @param {Ext.EventObject} e
* @param {Object} eOpts
*/
showContextMenu: function(view, record, item, index, e, eOpts) {
var me = this;
// stop event so browser's normal right-click action doesn't continue
e.stopEvent();
// if a menu doesn't already exist, create one
if(!item.contextMenu) {
// add menu
item.contextMenu = new Ext.menu.Menu({
items: [
{
text: 'Edit Item',
iconCls: 'icon_edit',
handler: function(item, e) {
var grid = me.getOptionList(),
plugin = grid.editingPlugin;
// start row edit
plugin.startEdit(record, 0);
}
},
{
text: 'Delete Item',
iconCls: 'icon_delete',
handler: function(item, e) {
me.remove(record);
}
}
]
});
}
// show menu relative to item which was right-clicked
item.contextMenu.showBy(item);
},
/**
* Loads the grid's store
* @param {Ext.grid.Panel}
* @param {Object}
*/
loadRecords: function(grid, eOpts) {
var me = this,
store = grid.getStore();
// clear any fliters that have been applied
store.clearFilter(true);
// load the store
store.load();
},
/**
* Cancels the edit of a record
* @param {Ext.grid.plugin.Editing} editor
* @param {Object} context
* @param {Object} eOpts
*/
cancel: function(editor, context, eOpts) {
// if the record is a phantom, remove from store and grid
if(context.record.phantom) {
context.store.remove(context.record);
}
},
/**
* Begins edit of selected record
* @param {Ext.data.Model[]} records
* @param {Number} index
* @param {Object} node
* @param {Object} eOpts
*/
edit: function(records, index, node, eOpts) {
var me = this,
grid = me.getOptionList(),
plugin = grid.editingPlugin;
// start edit of row
plugin.startEdit(records[ 0 ], 0);
},
/**
* Creates a new record and prepares it for editing
* @param {Ext.button.Button} button
* @param {Ext.EventObject} e
* @param {Object} eOpts
*/
add: function(button, e, eOpts) {
var me = this,
grid = me.getOptionList(),
plugin = grid.editingPlugin,
store = grid.getStore();
// if we're already editing, don't allow new record insert
if(plugin.editing) {
// show error message
Ext.Msg.alert('Attention', 'Please finish editing before inserting a new record');
return false;
}
store.insert(0, {});
},
/**
* Displays context menu
* @param {Ext.grid.plugin.Editing} editor
* @param {Object} context
* @param {Object} eOpts
*/
save: function(editor, context, eOpts) {
var me = this,
store = context.record.store;
// save
store.save();
},
/**
* Displays context menu
* @param {Ext.data.Model[]} record
*/
remove: function(record) {
var me = this,
store = record.store;
// show confirmation before continuing
Ext.Msg.confirm('Attention', 'Are you sure you want to delete this item? This action cannot be undone.', function(buttonId, text, opt) {
if(buttonId=='yes') {
console.log(record);
store.destroy(record);
store.sync({
/**
* On failure, add record back to store at correct index
* @param {Ext.data.Model[]} records
* @param {Ext.data.Operation} operation
*/
failure: function(records, operation) {
store.rejectChanges();
}
});
}
});
}
});
这里是我的色彩模式：
Ext.define('CarTracker.model.option.Color', {
extend: 'CarTracker.model.option.Base',
fields: [
// id field
{
name: 'id',
type: 'int',
useNull : true
}
]
});
这里是我的彩店
/**
* Store for managing car colors
*/
Ext.define('CarTracker.store.option.Colors', {
extend: 'Ext.data.Store',
alias: 'store.option.color',
requires: [
'CarTracker.model.option.Color'
],
storeId: 'Colors',
model: 'CarTracker.model.option.Color',
remoteFilter: true,
remoteSort: true,
proxy: {
type: 'rest',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'POST',
destroy: 'POST'
},
api: {
create: 'index.php/color/create',
read: 'index.php/color/read',
update: 'index.php/color/update',
destroy: 'index.php/color/delete'
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
},
writer: {
type: 'json',
writeAllFields: false,
allowSingle: false,
encode: true,
root: 'data'
}
}
});
在后端我有一个简单 - as-can-be控制器和模型，它不会做任何特殊的事情，但会删除发送的ID的记录。但是，通过alw发送的ID AYS看起来是这样的：
CarTracker.model.option.Color-6
对我的生活中，我想不通为什么我收到此作为ID，而不是简单的“6”。我对extjs相当陌生，他在教程中使用的结构与我在其他地方看到的有所不同。
这里是要求：
Request URL:http://localhost/cartracker/index.php/color/delete/CarTracker.model.option.Color-6?_dc=1380747404785
Request Method:POST
Status Code:200 OK
Request Headersview source
Connection:keep-alive
Content-Length:46
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Host:localhost
Origin:http://localhost
Referer:http://localhost/cartracker/
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36
X-Requested-With:XMLHttpRequest
Query String Parametersview sourceview URL encoded
_dc:1380747404785
Form Dataview sourceview URL encoded
id:CarTracker.model.option.Color-6
data:[]
Response Headersview source
Connection:Keep-Alive
Content-Length:387
Content-Type:text/html
Date:Wed, 02 Oct 2013 20:56:44 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.4 (Win32) OpenSSL/0.9.8y PHP/5.4.19
X-Powered-By:PHP/5.4.19
你可以发布整个请求主体 –