Question

如何在extjs中解决此错误Uncaught TypeError: Cannot read property 'dom' of undefined？

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

代码：

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

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

请参阅 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

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

编辑：
错误在此行生成：

formPanel.body.dom

这意味着由于您尝试访问其body属性而未呈现formPanel。此属性从以下版本开始可用：Ext 4.1.3

Answer 3

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

中的一些ui元素

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

直接来自hasRows（）源于3.4：

中的网格

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

未捕获的TypeError：无法读取未定义的属性“dom”

3 个答案: