javascript - EXTJS 4.2 将新条目添加到存储/网格

Question

我在 ExtJS 4.2 中向商店/网格添加新条目时遇到问题。创建操作在服务器上运行并为新记录返回生成的 id。我可以开始编辑网格中未显示的行。同步后我得到的错误是：Uncaught TypeError: Cannot read property 'parentNode' of null.

项目商店.js：

var projectStore = Ext.create('Ext.data.Store', {
    model: 'ProjectModel',
    storeId: 'projectStore',
    autoLoad: true,
    autoSync: true,
    proxy: {
        type: 'ajax',
        api: {
            create: webPath+'server.php?action=createProjectStore',
            read: webPath+'server.php?action=readProjectsStore',
            update: webPath+'server.php?action=updateProjectStore',
            destroy: webPath+'server.php?action=destroyProjectStore'
        },
        extraParams: {
            token: userDetails.token,
            userName: userDetails.UserName
        },
        reader: {
            type: 'json',
            successProperty: 'success',
            idProperty: "ProjectID",
            root: 'data',
            messageProperty: 'message'
        },
        writer: {
            type: 'json',
            writeAllFields: true,
            root: 'data',
            encode: true,
            allowSingle: false
        },
        listeners: {
            exception: function(proxy, response, operation){
//                Ext.MessageBox.show({
//                    title: 'REMOTE EXCEPTION',
//                    msg: operation.getError(),
//                    icon: Ext.MessageBox.ERROR,
//                    buttons: Ext.Msg.OK
//                });
                operation.records[0].reject();
            }
        },
        onUpdateRecords: function(records, operation, success) {
            console.log(records);
        }
    }
});

项目模型.js：

Ext.define('ProjectModel', {
    extend: 'Ext.data.Model',
    idProperty: 'ProjectID',
    fields: [ {
        name: 'ProjectID',
        type: 'int'
    }, 'AccountName', 'AccountID', 'ProjectName', 'Deleted']
});

userProfileProjects.js

Ext.require([
    'Ext.grid.Panel',
    'Ext.form.*',
    'Ext.window.Window',
    'Ext.data.*'
]);

$(document).data('mcal.userAccountFixPopupOpen', false);
$(document).data('mcal.newProjectRecord', false);

var userProfileProjectRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToEdit: 1
});

Ext.define('User.Project.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userProjectsGrid',
    initComponent: function(){
        this.editing = userProfileProjectRowEditing;
        this.onRemoveProject = function(grid, rowIndex, colIndex) {
            grid.getStore().removeAt(rowIndex);
        }
        Ext.apply(this, {
            dockedItems: [{
                xtype: 'toolbar',
                items: ['->',
                    {
                        text: 'Add Project',
                        handler : function() {
                            userProfileProjectRowEditing.cancelEdit();

                            // Create a model instance
                            var r = Ext.create('ProjectModel', {
                                ProjectName: 'New Project'
                            });

                            projectStore.insert(0, r);
                            $(document).data('mcal.newProjectRecord', true);
                            userProfileProjectRowEditing.startEdit(0, 0);
                        }
                    },
                    {
                        iconCls: 'icon-refresh',
                        text: 'Refresh',
                        scope: this,
                        handler: this.onRefresh
                    }]
            }],
            columns: [
                {
                    text: 'Account',
                    width: 115,
                    sortable: true,
                    hidden: false,
                    dataIndex: 'AccountID',
                    renderer: function(value){
                        var accountID = userAccountTimeLimitedStore.getAt(userAccountTimeLimitedStore.find('key', value));
                        return accountID.get('AccountName');
                    },
                    editor: {
                        xtype: 'combobox',
                        valueField: 'key',
                        displayField: 'AccountName',
                        triggerAction: 'all',
                        queryMode: 'local',
                        store: userAccountTimeLimitedStore
                    },
                    flex: 1
                },
                {
                    text: 'Project',
                    width: 115,
                    sortable: true,
                    dataIndex: 'ProjectName',
                    field: {
                        type: 'textfield'
                    },
                    flex: 1,
                    hidden: false
                },
                {
                    xtype:'actioncolumn',
                    text: 'Delete',
                    width:45,
                    align: 'center',
                    editRenderer: function(){ return ''},
                    items: [{
                        icon: webPath+'/images/remove.png',  // Use a URL in the icon config
                        tooltip: 'Edit',
                        handler: this.onRemoveProject
                    }]
                }
            ],
            selType: 'rowmodel',
            plugins: [this.editing]
        });
        this.callParent();
    },
    onRefresh: function(){
        this.store.reload();
    }
});

function initUserProjectGrid(){

    window.main = Ext.create('Ext.container.Container', {
        padding: '0 0 0 0',
        width: 380,
        height: 200,
        renderTo: Ext.get('userProjectGridDiv'),
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
                itemId: 'userProfileProjectGrid',
            xtype: 'userProjectsGrid',
            title: 'Projects',
            flex: 1,
            store: 'projectStore'
        }]
    });
//    main.getComponent('userProfileProjectGrid').editing.editor.form.findField('AccountName').disable();
    var localEdit = main.getComponent('userProfileProjectGrid').editing;
    localEdit.on('beforeedit', function(editor, context, eOpts){
        if($(document).data('mcal.newProjectRecord') != true){
            localEdit.editor.form.findField('AccountID').disable();
        }else{
            localEdit.editor.form.findField('AccountID').enable();
        }
    });
    localEdit.on('afteredit', function(){
        $(document).data('mcal.newProjectRecord', false);
    });
}