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事件,大家可以尝试以下