[Solved] EditorGrid add new row error: this.config[colIndex] is undefined

[mohaaron]

I'm trying to get my first EditorGridPanel working and have figured out most of my problems so far. I now have this error and can't figure out what it means or how to make it go away.

This happens when I'm adding a new empty/blank row to the grid. I have been trying to copy the example grid but I'm doing something wrong that I'm not seeing.

I did some searching on the forums and found one other post about this which implied the column model had to match the store fields but this is not helping me.

Error:

this.config[colIndex] is undefined
(this.config[colIndex].ed...nfig[colIndex].editor)) ? true : false;\n

Code:

var jobsGridCM = new Ext.grid.ColumnModel({
    columns: [
        new Ext.grid.RowNumberer(),
        { header: 'JobOrderId', width: 50, sortable: true, dataIndex: 'JobOrderId' },
        { header: 'JobId', width: 50, sortable: true, dataIndex: 'JobId' },
        { header: 'JobTypeId', width: 50, sortable: true, dataIndex: 'JobTypeId' },
        { header: 'JobTypeName', width: 60, sortable: true, dataIndex: 'JobTypeName',
            editor: new Ext.form.TextField({
                //allowBlank: false
            })
        }, {
            header: 'TugId', width: 50, sortable: true, dataIndex: 'TugId'
        }, {
            header: 'TugName', width: 80, sortable: true, dataIndex: 'TugName',
            editor: new Ext.form.TextField({
                //allowBlank: false
            })
        }, {
            header: 'BerthFromCode', width: 50, sortable: true, dataIndex: 'BerthFromCode',
            editor: new Ext.form.TextField({
                //allowBlank: false
            })
        }, {
            header: 'BerthToCode', width: 50, sortable: true, dataIndex: 'BerthToCode',
            editor: new Ext.form.TextField({
                //allowBlank: false
            })
        }, {
            header: 'Notes', width: 150, sortable: true, dataIndex: 'Notes',
            editor: new Ext.form.TextField({
                //allowBlank: false
            })
        }
    ]
});

var jobsGrid = new Ext.grid.EditorGridPanel({
    id: 'jobsGrid',
    //width: 750,
    height: 150,
    frame: true,
    clicksToEdit: 1,
    cm: jobsGridCM,
    sm: new Ext.grid.RowSelectionModel({
        singleSelect: true
    }),
    viewConfig: {
        forceFit: true
    },
    tbar: [{
        //iconCls: 'icon-user-add',
        text: 'Add',
        handler: function(){
            var store = jobsGrid.getStore();
            var Job = store.recordType;
            var job = new Job({
                JobOrderId: 0,
                JobId: 0,
                JobTypeId: 0,
                JobTypeName: 'none',
                TugId: 0,
                TugName: 'none',
                BerthFromCode: 'none',
                BerthToCode: 'none',
                Notes: 'none'
            });
            jobsGrid.stopEditing();
            store.insert(0, job);
            // This commented code is from another example I found.
            //jobsGrid.getView().refresh();
            //grid.getSelectionModel().selectRow(0);
            jobsGrid.startEditing(0);
        }
    },{
        //iconCls: 'icon-user-delete',
        text: 'Remove',
        //disabled: true,
        handler: function(){
            var store = jobsGrid.getStore();
            jobsGrid.stopEditing();
            var s = jobsGrid.getSelectionModel().getSelections();
            for(var i = 0, r; r = s[i]; i++){
                store.remove(r);
            }
        }
    }],
    store: new Ext.data.JsonStore({
        id: 'gridStore',
        root: 'd.rows',
        totalProperty: 'd.totalRows',
        idProperty: 'JobId',
        fields: [
            { name: 'JobOrderId', type: 'int' },
            { name: 'JobId', type: 'int' },
            { name: 'JobTypeId', type: 'int' },
            { name: 'JobTypeName', type: 'string' },
            { name: 'TugId', type: 'int' },
            { name: 'TugName', type: 'string' },
            { name: 'BerthFromCode', type: 'string' },
            { name: 'BerthToCode', type: 'string' },
            { name: 'Notes', type: 'string' }
        ],
        proxy: new Ext.data.HttpProxy({
            url: '../WebServices/JobsWebService.asmx/GetJobs',
            method: 'post',
            jsonData: {}, // Seems to force the use of the query string.
            headers: { 'Content-Type': 'application/json; charset=utf-8;' }
        })
    }),
    listeners: {
        render: function(grid) {
            // The store load is happening in the row select event of a different grid.
            //grid.getStore().load();
        }
    }
});

[mohaaron]

Why I didn't see this before I don't know but it's an easy answer. I was not passing the correct parameters to the startEditing method. I'm not really sure why nobody would tell me this but I did finally figure it out on my own.

This code

grid.startEditing(0);

Should have been this code.

grid.startEditing(0, 0);

If your using a RowNumberer or your first column is not editable make sure to start your editing on you first editable column.

So if your first editable column is the third column in use this.

grid.startEditing(0, 2);