好的，所以我正在关注本教程：http ://existdissolve.com/2013/05/extjs-4-2-walkthrough-part-4-steppin-in-some-crud/
我使用 Codeigniter 作为后端并遵循教程中的 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'
}
}
});
在后端，我有一个简单的控制器和模型，它没有做任何特别的事情，但删除了发送的 ID 的记录。但是，发送的 id 总是看起来像这样：
CarTracker.model.option.Color-6
对于我的生活，我无法弄清楚为什么我将 THIS 作为 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