从树拖动到div

我正在尝试将senario从extJs树面板拖放到页面主体的div中。我一直在学习Saki的一个例子 here

到目前为止,我有以下代码:

var contentAreas = new Array();
var tree = new Ext.tree.TreePanel({
                title : 'Widgets',
                useArrows: true,
                autoScroll: true,
                animate: true,
                enableDrag: true,
                border: false,
                layout:'fit',
                ddGroup:'t2div',
                loader:new Ext.tree.TreeLoader(),
                root:new Ext.tree.AsyncTreeNode({
                    expanded:true,
                    leaf:false,
                    text:'Tree Root',
                    children:children
                }),
                listeners:{
                    startdrag:function() {
                         $('.content-area').css("outline", "5px solid #FFE767");
                    },
                    enddrag:function() {
                        $('.content-area').css("outline", "0");
                    }
                }
            });

            var areaDivs = Ext.select('.content-area', true);
            Ext.each(areaDivs, function(el) {
                var dd = new Ext.dd.DropTarget(el, {
                    ddGroup:'t2div',
                    notifyDrop:function(ddt, e, node) {
                        alert('Drop');
                        return true;
                    } 
                });
                contentAreas[contentAreas.length] = dd;
            });

拖动开始,div高亮显示,但当我越过div时,它不会显示为有效的拖放目标,拖放失败。

这是我第一次涉足extJS。我是JQuery彻头彻尾的,我现在很挣扎。

任何帮助都将不胜感激。

伊恩

此外,如果我创建了一个面板,其中有一个放置目标,这就可以了。创建一个元素和从dom中选择一个现有元素有什么区别。这显然是我的错误所在,但我一点也不明白。我必须能够选择现有的dom元素并将它们放入drop目标中,因此下面的代码不是一个选项。

var target = new Ext.Panel({
                renderTo: document.body
                ,layout:'fit'
                ,id:'target'
                ,bodyStyle:'font-size:13px'
                ,title:'Drop Target'
                ,html:'<div class="drop-target" '
                      +'style="border:1px silver solid;margin:20px;padding:8px;height:140px">'
                      +'Drop a node here. I\'m the DropTarget.</div>'

                // setup drop target after we're rendered
                ,afterRender:function() {
                    Ext.Panel.prototype.afterRender.apply(this, arguments);
                    this.dropTarget = this.body.child('div.drop-target');
                    var dd = new Ext.dd.DropTarget(this.dropTarget, {
                        // must be same as for tree
                         ddGroup:'t2div'

                        // what to do when user drops a node here
                        ,notifyDrop:function(dd, e, node) {
                            alert('drop');
                            return true;
                        } // eo function notifyDrop
                    });
                } 
            });