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'/>增加  ";
}else{
htm = "<input type='checkbox' disabled='disabled'/>增加  ";
}
if(v.charAt(8)=='1'){
htm += "<input type='checkbox' checked='checked' disabled='disabled'/>删除  ";
}else{
htm += "<input type='checkbox' disabled='disabled'/>删除  ";
}
if(v.charAt(9)=='1'){
htm += "<input type='checkbox' checked='checked' disabled='disabled'/>修改  ";
}else{
htm += "<input type='checkbox' disabled='disabled'/>修改  ";
}
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);
}
});


});