Uncaught TypeError: Cannot read property 'dom' of undefined

Question

How to solve this error Uncaught TypeError: Cannot read property 'dom' of undefined in extjs?

I`m using dnd and put dnd code into layout browser

code :

// Generic fields array to use in both store defs.
var fields = [{
    name: 'id',
    type: 'string',
    mapping: 'id'
}, {
    name: 'lab_name',
    type: 'string',
    mapping: 'lab_name'
}, {
    name: 'lab_address1',
    type: 'string',
    mapping: 'lab_address1'
}, {
    name: 'lab_address2',
    type: 'string',
    mapping: 'lab_address2'
}, {
    name: 'lab_poskod',
    type: 'string',
    mapping: 'lab_poskod'
}, {
    name: 'lab_bandar',
    type: 'string',
    mapping: 'lab_bandar'
}, {
    name: 'lab_negeri',
    type: 'string',
    mapping: 'lab_negeri'
}, {
    name: 'lab_tel',
    type: 'string',
    mapping: 'lab_tel'
}, {
    name: 'lab_fax',
    type: 'string',
    mapping: 'lab_fax'
}];

// create the data store
var gridStore = new Ext.data.JsonStore({
    fields: fields,
    autoLoad: true,
    url: '../industri/layouts/getLab.php'
});


// Column Model shortcut array
var cols = [{
    id: 'name',
    header: "Id",
    width: 10,
    sortable: true,
    dataIndex: 'id'
}, {
    id: 'name',
    header: "Laboratory Name",
    width: 200,
    sortable: true,
    dataIndex: 'lab_name'
}, {
    id: 'name',
    header: "Laboratory Name",
    width: 200,
    sortable: true,
    dataIndex: 'lab_address1'
}];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
    ddGroup: 'gridDDGroup',
    store: gridStore,
    columns: cols,
    enableDragDrop: true,
    stripeRows: true,
    autoExpandColumn: 'name',
    width: 325,
    margins: '0 2 0 0',
    region: 'west',
    title: 'Data Grid',
    selModel: new Ext.grid.RowSelectionModel({
        singleSelect: true
    })
});



// Declare the text fields.  This could have been done inline, is easier to read
// for folks learning :)
var textField1 = new Ext.form.TextField({
    fieldLabel: 'Laboratory Name',
    name: 'lab_name'
});


// Setup the form panel
var formPanel = new Ext.form.FormPanel({
    region: 'center',
    title: 'Generic Form Panel',
    bodyStyle: 'padding: 10px; background-color: #DFE8F6',
    labelWidth: 100,
    margins: '0 0 0 3',
    width: 325,
    items: [textField1]
});


var displayPanel = new Ext.Panel({
    width: 650,
    height: 300,
    layout: 'border',
    padding: 5,
    items: [
        grid,
        formPanel
    ],
    bbar: [
        '->', // Fill
        {
            text: 'Reset Example',
            handler: function() {
                //refresh source grid
                gridStore.loadData();
                formPanel.getForm().reset();
            }
        }
    ]

});


// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);

/****
 * Setup Drop Targets
 ***/

// This will make sure we only drop to the view container
var formPanelDropTargetEl = formPanel.body.dom;

var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
    ddGroup: 'gridDDGroup',
    notifyEnter: function(ddSource, e, data) {

        //Add some flare to invite drop.
        formPanel.body.stopFx();
        formPanel.body.highlight();
    },
    notifyDrop: function(ddSource, e, data) {

        // Reference the record (single selection) for readability
        var selectedRecord = ddSource.dragData.selections[0];


        // Load the record into the form
        formPanel.getForm().loadRecord(selectedRecord);


        // Delete record from the grid.  not really required.
        ddSource.grid.store.remove(selectedRecord);

        return (true);
    }
});



var tabsNestedLayouts = {
    id: 'tabs-nested-layouts-panel',
    title: 'Industrial Effluent',
    bodyStyle: 'padding:15px;',
    layout: 'fit',
    items: {
        border: false,
        bodyStyle: 'padding:5px;',
        items: displayPanel
    }
};

Answer 1

If you try and render a component to a dom element that isn't found (or dom ID that isn't found) you'll get that error. See the example below to reproduce the error - then comment out the bad renderTo and uncomment the renderTo: Ext.getBody() to resolve the issue.

see this FIDDLE

CODE SNIPPET

Ext.onReady(function () {
    // Generic fields array to use in both store defs.
    var fields = [{
        name: 'id',
        type: 'string',
        mapping: 'id'
    }, {
        name: 'lab_name',
        type: 'string',
        mapping: 'lab_name'
    }, {
        name: 'lab_address1',
        type: 'string',
        mapping: 'lab_address1'
    }, {
        name: 'lab_address2',
        type: 'string',
        mapping: 'lab_address2'
    }, {
        name: 'lab_poskod',
        type: 'string',
        mapping: 'lab_poskod'
    }, {
        name: 'lab_bandar',
        type: 'string',
        mapping: 'lab_bandar'
    }, {
        name: 'lab_negeri',
        type: 'string',
        mapping: 'lab_negeri'
    }, {
        name: 'lab_tel',
        type: 'string',
        mapping: 'lab_tel'
    }, {
        name: 'lab_fax',
        type: 'string',
        mapping: 'lab_fax'
    }];

    // create the data store
    var gridStore = new Ext.data.JsonStore({
        fields: fields,
        autoLoad: true,
        url: '../industri/layouts/getLab.php'
    });

    // Column Model shortcut array
    var cols = [{
        id: 'name',
        header: "Id",
        width: 10,
        sortable: true,
        dataIndex: 'id'
    }, {
        id: 'name',
        header: "Laboratory Name",
        width: 200,
        sortable: true,
        dataIndex: 'lab_name'
    }, {
        id: 'name',
        header: "Laboratory Name",
        width: 200,
        sortable: true,
        dataIndex: 'lab_address1'
    }];
    // declare the source Grid
    var grid = new Ext.grid.GridPanel({
        ddGroup: 'gridDDGroup',
        store: gridStore,
        columns: cols,
        enableDragDrop: true,
        stripeRows: true,
        autoExpandColumn: 'name',
        width: 325,
        margins: '0 2 0 0',
        region: 'west',
        title: 'Data Grid',
        selModel: new Ext.grid.RowSelectionModel({
            singleSelect: true
        })
    });

    // Declare the text fields.  This could have been done inline, is easier to read
    // for folks learning :)
    var textField1 = new Ext.form.TextField({
        fieldLabel: 'Laboratory Name',
        name: 'lab_name'
    });

    // Setup the form panel
    var formPanel = new Ext.form.FormPanel({
        region: 'center',
        title: 'Generic Form Panel',
        bodyStyle: 'padding: 10px; background-color: #DFE8F6',
        labelWidth: 100,
        margins: '0 0 0 3',
        width: 325,
        items: [textField1]
    });

    var displayPanel = new Ext.Panel({
        width: 650,
        height: 300,
        layout: 'border',

        renderTo:Ext.getBody(),

        padding: 5,

        items: [
            grid,
            formPanel
        ],
        bbar: [
            '->', // Fill
            {
                text: 'Reset Example',
                handler: function () {
                    //refresh source grid
                    //gridStore.loadData();
                    formPanel.getForm().reset();
                }
            }
        ]

    });

    // used to add records to the destination stores
    var blankRecord = Ext.data.Record.create(fields);

    /****
     * Setup Drop Targets
     ***/

    // This will make sure we only drop to the view container
    var formPanelDropTargetEl = formPanel.body.dom;

    var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
        ddGroup: 'gridDDGroup',
        notifyEnter: function (ddSource, e, data) {

            //Add some flare to invite drop.
            formPanel.body.stopFx();
            formPanel.body.highlight();
        },
        notifyDrop: function (ddSource, e, data) {

            // Reference the record (single selection) for readability
            var selectedRecord = ddSource.dragData.selections[0];

            // Load the record into the form
            formPanel.getForm().loadRecord(selectedRecord);

            // Delete record from the grid.  not really required.
            ddSource.grid.store.remove(selectedRecord);

            return (true);
        }
    });

    var tabsNestedLayouts = {
        id: 'tabs-nested-layouts-panel',
        title: 'Industrial Effluent',
        bodyStyle: 'padding:15px;',
        layout: 'fit',
        items: {
            border: false,
            bodyStyle: 'padding:5px;',
            items: displayPanel
        }
    };
});

Answer 2

It means that the object which you expect to have the dom attribute is undefined.

EDIT:
The error generates at this line:

formPanel.body.dom

It means that the formPanel is not rendered because you are trying to access its body property. This property is Available since: Ext 4.1.3

Answer 3

I'm seeing a similar error in code that executes for validation. What I'm doing has nothing to do with directly accessing the DOM, however I'm still getting a similar condition. The answer above is incomplete, the dom property is available on some ui elements in 3.x...

in earlier versions of Extjs (3.x) the property is mainBody.dom and not body.dom

directly from the source of hasRows() for grids in 3.4:

var fc = this.**mainBody.dom**.firstChild;
return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty';