Extjs4.1拖拽，dataview到window的拖拽实现

Extjs实现了数据的拖拽，最近做项目要到，整了一点，在此分享给大家。

以下是dataview的代码，

xtype: 'dataview',
             overItemCls: 'thcls-monitoruser-dataview-over',
             cls:'thcls-monitoruser-dataview',
             margin:'0 0 0 20',
             border:false,
             trackOver: true,
             itemSelector: 'div.thcls-monitoruser-dataview',
             store: Ext.create('Ext.data.Store', {
     fields:['id','equipmentId','handlerName','handlerGrade','handlerClass'],
     proxy:{
      type: 'ajax',
                  method:'POST',
                  async :  false,
                  url : 'equipmenthandler.action',
                  extraParams:{
                   handlerGrade:encodeURI(grade),
                   handlerClass:encodeURI(item)
                  },
                  reader: {
                      type: 'json',
                      root: 'lists'
                  }
     },
     autoLoad:true
    }),
             style: { position: 'absolute' },
             tpl: new Ext.XTemplate([
        '<div style="margin-right:auto;margin-left:auto;">',
           '<tpl for=".">',
               '<div class="thcls-monitoruser-dataview" style="width:77px;height:97px;" id="{id}">',
                   (!Ext.isIE6? '<img src="resources/images/monitoruser/user.gif" width="64px" height="64px"/>' :
                   '<div style="position:relative;width:64px;height:64px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'resources/images/monitoruser/user.gif\')"></div>'),
                   '<br/><span class="thcls-monitoruser-dataview-text">{handlerName}</span>',
               '</div>',
           '</tpl>',
           '</div>'
       ]),
       listeners:{
        itemclick:function(view,record){
         var dlg=new JDicloud.Monitor.MonitorMap({
          equipmentId:record.data.equipmentId
         });
         dlg.show();
        },
        itemmouseleave:function(view,record,item,index,e){
         me.dlg.hide();
        },
        itemmouseenter:function(view,record,item,index,e){
         me.dlg=new JDicloud.Monitor.MonitorUserInfo({
          handlerName:record.data.handlerName
         });
         me.dlg.setHolderPosition(record.data.equipmentId);
         me.dlg.showAt(e.getXY());
        },
     render: me.initializePatientDragZone
       }
   }

window部分的代码
 //id:'monitormap',
 alias: 'widget.monitormap',
 width:800,
 height:500,
 cls:'monitormap-target-cls',
 title:'<font size="4">新乡市实验幼儿园<font size="4"></font>',
 border:false,
 closeAction:'destroy',
 maximizable:true,//显示最大化按钮
 padding:'0 0 0 0',
 margin:'0 0 0 0',
 layout:'border',
 items:[],
 initComponent:function(){
  var mapPanel=this.getMapPanel();
  this.infoPanel=new JDicloud.Monitor.MonitorMapUserInfoPanel({
   equipmentId:this.equipmentId
  });
  this.lng=this.infoPanel.recordEP.lon;
  this.lat=this.infoPanel.recordEP.lat;
  this.items=[mapPanel,this.infoPanel];
  this.on({
   render:this.initializeMonitorMapDropZone
  });
  this.callParent();
 },
 initializeMonitorMapDropZone:function(v){
  v.dropZone=Ext.create('Ext.dd.DropZone',v.el,{
   getTargetFromEvent:function(e){
    return e.getTarget('.monitormap-target-cls');  
   },
   onNodeEnter : function(target, dd, e, data){
         },
         onNodeOut : function(target, dd, e, data){
         },
         onNodeOver : function(target, dd, e, data){
             return Ext.dd.DropZone.prototype.dropAllowed;
         },
   onNodeDrop:function(target,dd,e,data){
    alert(Ext.encode(data.patientData));
   }
   
  });
重点都在两个类中的render事件，大家可以尝试以下