ExtJs rowediting insert new row error: Uncaught TypeError: Cannot read property 'syncContent' of null

3
votes

My rowediting work ok with Update grid row but grid gave to me error when try to add new row after click save.

NOTE:(when remove renderer from the combo box grid insert work ok. but that case to show ID in the combo grid column that why i added renderer function for combo)

error code

Uncaught TypeError: Cannot read property 'syncContent' of null

that error point to ext-all-debug.js file in bellow code for oldCell become null value

        cellSelector = me.getCellSelector(column);
        oldCell = Ext.DomQuery.selectNode(cellSelector, oldRowDom);
        newCell = Ext.DomQuery.selectNode(cellSelector, newRowDom);


        if (isEditing) {
            Ext.fly(oldCell).syncContent(newCell);
        }

this is how i add new row into the grid

var grid = grid;
var rowEditing = grid.getPlugin('RowEditor');
var store = grid.getStore();
var model = model;
rowEditing.cancelEdit();
store.insert(0, model);
var main_id     = Ext.ComponentQuery.query('textfield[itemId=txtmain_id]')[0].getValue();
store.data.items[0].data.CSTMR_ID = main_id;
rowEditing.startEdit(0, 0);
grid.getSelectionModel().select(0, true);

this grid edit combo field column

columns: [
   {
       xtype: 'gridcolumn',
       renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
           var store =store;
           var selrecord = store.getAt(store.findExact('ID', value));
           return selrecord.get('NAME');
       },
       itemId: 'colName',
       dataIndex: 'ID',
       text: 'Name',
       editor: {
           xtype: 'combobox',
           itemId: 'cboName',
           name: 'ID',
           displayField: 'NAME',
           store: store,
           valueField: 'ID'
       }
   },

store for the combo 

   Ext.define('store', {
    extend: 'Ext.data.Store',
    alias: 'store',

    requires: [
        'model',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

Model for combo

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        autoLoad: true,
        model: 'model',
        storeId: 'store',
        proxy: {
            type: 'ajax',
            url: 'url?submit=true&action=getac',
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    }, cfg)]);
}

please help to me avoid that 'Uncaught TypeError: Cannot read property 'syncContent' of null ' error for new row insert

2
extjsextjs4.2

2 Answers

3
votes

Had this exact problem and Vitale's response does work - after adding in the missing colon like so

return (index === -1) ? "" : store.getAt(index).get('NAME')

This makes sure that the renderer does not try and find the display value (the 'NAME') before rowedit has finished adding the record to the store (and saved an appropriate index), as the new record's index defaults to -1.

0
votes
Probably problem in renderer.
Fix:

var index = store.findExact('ID', value);
return (index === -1) ? "" store.getAt(index).get('NAME');