title: Uncaught TypeError: Cannot read property 'dom' of undefined
body: <p>How to solve this error <code>Uncaught TypeError: Cannot read property 'dom' of undefined</code> in extjs?</p>
  
  <p>I`m using dnd and put dnd code into layout browser </p>
  
  <p>code :</p>
  
  <pre><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: [
          '-&gt;', // 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
      }
  };
  </code></pre>