Solved! Layer with panel constructed from existing div not working

[rwankar]

Please see the attached image. I'm trying to have a layer with a panel in it show when the "Pick Columns" link is clicked. The contents of the panel are loaded from an existing div using contentEl. I've also tried applyTo. I need the contents to open in the layer when the link is clicked.

The original div is showing when the page is loaded. Doesn't contentEl remove it from it from the dom? If I set the display to none, the div is hidden but never shows up when the layer is shown. I don't get any errors.

The "My Projects" itself is a panel.

Also, is it possible to do this with a floating panel? How can I have the floating panel anchored to the link? In that case what is the difference between layer and floating panel?

Here is the code

 ....
 <a id="linkId" href="noop(); onclick="Ext.get('layerId').show(true);">Pick Columns</a>

 <div id="contentId">
   <div class="x-panel-header">Pick Columns</div>
   <div class="x-panel-body">... panel contents... </div>
   <div class="x-panel-bbar">.. panel buttons ...</div>
 </div>

 <script language="javascript">
Ext.onReady(function () {

    var layerId =  'layerId';
    var pickerId = 'linkId';
    var contentId = 'contentId';
    var layer = new Ext.Layer({
            id: layerId,
            zindex: 10000
            // parentEl: document.body -- does not help
        });

    var picker = Ext.get(pickerId);
    picker.layer = layer;
    layer.anchorTo(pickerId, 'tr');
    //layer.show(false);

    var p = new Ext.Panel({
        hideCollapseTool: true,
        titleCollapse: false,
        collapsible: false,
        layout: 'fit',
        //applyTo: contentId
        contentEL: contentId
        });

     var someId = Ext.id();
     layer.createChild({tag: 'div', id: someId});
     p.render(someId);
     layer.hide();
   }
);
</script>

[rwankar]

I've got it working. I set the css class x-hide-panel on the content div and set autoShow: true on the panel.

Now the problem is that the panel is too narrow and getting truncated at the right edge of the browser. Is there a way to tell the layer to auto-position such that it is always fully visible?

<div id="contentId" class="x-panel-hide">
....
</div>

...
    var p = new Ext.Panel({
        hideCollapseTool: true,
        titleCollapse: false,
        collapsible: false,
        layout: 'fit',
        autoShow: true,
        contentEL: contentId
        });
....

[rwankar]

Fixed positioning as well using alignTo.

layer.alignTo(pickerId, 'bl-tl?');