javascript 未捕获的类型错误：无法读取未定义的属性“dom”

Uncaught TypeError: Cannot read property 'dom' of undefined

提问by meow

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

如何解决Uncaught TypeError: Cannot read property 'dom' of undefinedextjs中的这个错误？

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

我正在使用 dnd 并将 dnd 代码放入布局浏览器

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
    }
};

回答by Narendra Jadhav

If you try and render a component to a domelement that isn't found (or domID 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.

如果您尝试将组件渲染到dom未找到的元素（或未找到的domID），您将收到该错误。请参阅下面的示例以重现错误 - 然后注释掉错误的 renderTo 并取消注释renderTo: Ext.getBody()以解决问题。

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
        }
    };
});

回答by A1rPun

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

这意味着您希望具有该dom属性的对象未定义。

EDIT:
The error generates at this line:

编辑：
错误在这一行产生：

formPanel.body.dom

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

这意味着formPanel未呈现，因为您正在尝试访问其body属性。此属性可用自：Ext 4.1.3

回答by Shane

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...

我在为验证而执行的代码中看到类似的错误。我所做的与直接访问 DOM 无关，但是我仍然遇到类似的情况。上面的答案不完整，dom属性在3.x中的一些ui元素上可用...

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

在早期版本的 Extjs (3.x) 中，属性是 mainBody.dom 而不是 body.dom

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

直接来自 3.4 中网格的 hasRows() 源：

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