treeGrid目录拖动到formPanel

我在网上查找了很多资料,发现关于使用DropTarget从tree形目录里拖动数据到formPanel的例子比较少,所以花了很长时间自已做了一个.
JS代码如下:
var arrayNode = new Array();//此数组用于存放节点对象

Ext.onReady(function(){

   // Declare the text fields.  This could have been done inline, is easier to read
// for folks learning
var hidden = new Ext.form.Hidden({
name       : 'funcId'
// disabled  : true
});

var textField1 = new Ext.form.TextField({
fieldLabel : '功能名称',
autoWidth : true,
name       : 'funcName',
labelWidth : 30
});


var textField2 = new Ext.form.TextField({
fieldLabel : '功能编码',
autoWidth : true,
name       : 'funcCode',
labelWidth : 30
});


var textField3 = new Ext.form.TextField({
fieldLabel : 'Column 2',
autoWidth : true,
name       : 'funcPriv',
labelWidth : 30
});


// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region     : 'center',
title      : 'Generic Form Panel',
bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
width      : 325,
items      : [
hidden,
textField1,
textField2,
textField3,
{
　 columnWidth : .50,
　　 xtype : "panel",
　　 layout : "column",// 也可以是table,实现多列布局
　　 fieldLabel : '功 能',
　　 isFormField : true,// 非常重要,否则panel默认不显示fieldLabel
border:false,
　　 items : [{
　　 xtype : "checkbox",
allowBlank:false,
　　 columnWidth : .33,
　　 boxLabel : "增加",
　　 name : "x_add",
　　 id : "x_add",
　　 inputValue : "isTeam"
　　}, {
　　xtype : "checkbox",
　　columnWidth : .34,
　　// anchor : '97%',
　　boxLabel : "删除",
　　name : "x_del",
　　id : "x_del",
　　inputValue : "isGreenLine"
　　}, {
　　xtype : "checkbox",
　　columnWidth : .33,
　　boxLabel : "修改",
　　name : "x_edit",
　　id : "x_edit",
　　inputValue : "isChecked"
　　}]
　}
]
});

var sm = new  Ext.grid.CheckboxSelectionModel();
var col = [
// sm,
{header : '功能名称', dataIndex : 'funcName',sortable : true, width : 200 },
{header : '功能编码',dataIndex : 'funcCode',sortable : true,headerAlign: "center", dataAlign: "left",width : 100},
{header : '功能权限',dataIndex : 'funcPriv',sortable : true,width : 150, align : 'center',
tpl : new Ext.XTemplate('{funcPriv:this.addper}', {
addper : function(v) {
var htm = "";
if(v.charAt(7)=='1'){
htm = "<input type='checkbox' checked='checked' disabled='disabled'/>增加&nbsp;&nbsp;";
}else{
htm = "<input type='checkbox' disabled='disabled'/>增加&nbsp;&nbsp;";
}
if(v.charAt(8)=='1'){
  htm += "<input type='checkbox' checked='checked' disabled='disabled'/>删除&nbsp;&nbsp;";
}else{
  htm += "<input type='checkbox' disabled='disabled'/>删除&nbsp;&nbsp;";
  }
  if(v.charAt(9)=='1'){
htm += "<input type='checkbox' checked='checked' disabled='disabled'/>修改&nbsp;&nbsp;";
}else{
htm += "<input type='checkbox' disabled='disabled'/>修改&nbsp;&nbsp;";
}
return htm;
}
})
}];

var treeTwo = new Ext.ux.tree.TreeGrid({
//el : 'treeTwo',
ddGroup:'TreeDD',
region : 'west',
width : 500,
//autoWidth : true,
autoHeight : true,
        autoExpandColumn : 'funcPriv',
// renderTo : Ext.getBody(),
enableDD : true,
enableDragDrop: false,
columns : col,
loader : new Ext.tree.TreeLoader({
dataUrl : 'treegrid-data.json'
})
});

//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width    : 800,
height   : 300,
layout   : 'border',
renderTo : 'panel',
items    : [
treeTwo,
formPanel
],
bbar    : [
'->', // Fill
{
text    : 'Reset Example',
handler : function() {
formPanel.getForm().reset();
for(var i=0;i<arrayNode.length;i++){
arrayNode[i].enable();  //重新启用该节点
}
}
}
]
});

// 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     : 'TreeDD',
notifyEnter : function(ddSource, e, data) {
//alert("fjdksa");
//Add some flare to invite drop.
formPanel.body.stopFx(data.node.id);
formPanel.body.highlight();
},
notifyDrop  : function(ddSource, e, data){
   // alert(seleNode.id);  
    var seleNode = data.node; 
formPanel.getForm().findField(0).setValue(seleNode.attributes["funcId"]);
    formPanel.getForm().findField(1).setValue(seleNode.attributes["funcName"]);
    formPanel.getForm().findField(2).setValue(seleNode.attributes["funcCode"]);
    formPanel.getForm().findField(3).setValue(seleNode.attributes["funcPriv"]);
   
    var fun = seleNode.attributes["funcPriv"];       
   if(fun != "" && fun != undefined){
   if(fun.charAt(7)=='1'){
   formPanel.getForm().findField('x_add').setValue(1);
   }else{
   formPanel.getForm().findField('x_add').setValue(0);
   }
   if(fun.charAt(8)=='1'){
   formPanel.getForm().findField('x_del').setValue(1);
   }else{
   formPanel.getForm().findField('x_del').setValue(0);
   }
   if(fun.charAt(9)=='1'){
   formPanel.getForm().findField('x_edit').setValue(1);
   }else{
   formPanel.getForm().findField('x_edit').setValue(0);
   }
   }   
   arrayNode.push(seleNode);
    data.node.disable();
    return(true);   
}
});


});