Question

好的，我正在学习本教程：http://existdissolve.com/2013/05/extjs-4-2-walkthrough-part-4-steppin-in-some-crud/

我使用Codeigniter作为后端并遵循教程中的ExtJ。

这是我的色彩控制器：

/**
 * 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

对于我的生活，我无法弄清楚为什么我得到这个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

Answer 1

所以这就是事情。当我第一次开始尝试＆＃34;修复＆＃34;我在我的控制器中将store.remove（）更改为store.remove（）。一开始似乎工作得更好。（我是extjs的新手，我仍然不能100％确定区别是什么）。然后我越往下线，我决定将我的身份证改为＆＃39; id＆＃39;而不是＆＃39; ColorId＆＃39;因此需要在我的模型中更改我的idProperty。然而，由于我的第一个改变，我没有得到身份证（也许毁灭不发送一个......或者只是某些条件？但没有任何线索）。

解决方案：我将store.destroy（）更改为store.remove（），然后将模型中的idProperty设置为“id”＃。我现在正在获取正确的ID。

Extjs使用codeigniter删除记录

1 个答案: