This is probably a lot easier than it seems, but I'm having a lot of trouble finding a simple example of drag-and-drop panel swapping - all the working Ext 2.x examples I've found have been working on pre-placed <ul><li> DOM structures and I can't seem to bend them to work with procedurally generated panels.

Everything else in Ext seems to have excellent, simple examples that are very easy to comprehend and modify, so I'm surprised I can't find a usable example - hopefully someone can point me to one or help me out.

All I need is a few panels in a column that I can swap around: something very similar to but working on panels generated in Ext.onReady. I imagine the Ext.dd.DragDropMgr.swapNodes() function would be handy here. I've tried setting draggable: true, and got the panels to be "draggable" and I can move the ghost, but (of course) it simply disappeared with no change on release, and I couldn't get swapping to work on the endDrag event function.

Here's a basic sample page that if I can get working, I should be able to expand to the application I need:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DD Test</title>
<link rel="stylesheet" type="text/css" href="/lib/ext2/resources/css/ext-all.css"/>
<script type="text/javascript" src="/lib/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/lib/ext2/ext-all.js"></script>
<script type="text/javascript">

    new Ext.Panel({
        title:'Test 1', 
        html: 'Big Test'

    new Ext.Panel({
        title:'Test 2', 
        html: 'Another Test'

    new Ext.Panel({
        title:'Test 3', 
        html: 'Last Test'

<div id="edit">
Thanks for your time.