Drag&Drop from grid to grid does not work inside tab panel

I have constructed the following panel to edit system roles: (see attachment jpg)

The left gridPanel ("assigned functions") and the right gridPanel ("unassigned functions") are items of a containing Panel.

When this containing Panel is not an item within a tabpanel, the drag & drop works.

NOW THE ERROR:
When this containg Panel is now a TabPanel item (as shown in the attached jpg), then the definition of the DropZone Container element does not work anymore as in the following code line now the ".el" method returns nil:
var acl_privileges_droptarget_el = acl_privileges_grid.getView().el.dom.childNodes[0].childNodes[1];

I tried with and without lazy instantiation - but that does not make any difference.
Does anyone know this problem or has a solution ?
I also want to mention that on the other two tabs there are also such drag & drop grids.

I am fighting this problem since two days - but now other information in the forums could help me.

Thank you for the hint. Unfortunatley it does not solve the problem. I even put a 5 second delay to have everything rendered. The behaviour is that when executing the
var acl_privileges_droptarget_el = acl_privileges_grid.getView().el. ... , the gridrows even disappear again on the screen.

The relevant part of the code is the following (don't get confused by the ruby code within the javascript ;-) ).
I have now the version without tabs (by commenting it out), that works. When using the tabpanel, then the error ocurrs.

I have solved the problem ! Finally you have been right with the rendering.
I need to set deferredRender: false in the tabpanel configuration, because only then also unactivated tabs are rendered and the DropTarget Zones can be defined.Thank you very much for your help !!!