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

EN

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