未捕獲的類型錯誤：無法讀取未定義的屬性“dom”

Question

如何解決此錯誤Uncaught TypeError: Cannot read property 'dom' of undefined in extjs？

我正在使用 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()以解決問題。

看到這個 小提琴

代碼片段

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

這意味着formPanel未呈現，因為您正在嘗試訪問其body屬性。 此屬性可用自：Ext 4.1.3

Answer 3

我在為驗證而執行的代碼中看到類似的錯誤。 我所做的與直接訪問 DOM 無關，但是我仍然遇到類似的情況。 上面的答案不完整，dom屬性在3.x中的一些ui元素上可用...

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

直接來自 3.4 中網格的 hasRows() 源：

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