我创建了两个网格面板左网格面板和右网格面板，我想在这些网格面板元素之间绘制一条箭头线，我需要获取左网格面板的每个元素 id 及其右网格面板的映射元素 id。我如何在 eextjs 中做到这一点，任何人都可以帮助我吗？我已经尝试了这么久，任何建议都非常感谢..
这是用于创建网格面板
Ext.onReady(function(){
var books = {
records : [{
title : "Ext JS in Action",
id: "title1"
},{
title : "Learning Ext JS",
id: "title2"
},{
title : "Ext JS Projects with Gears",
id: "title3"
},{
title : "Ext JS 3.0 Cookbook",
id: "title4"
},
]
};
var fields = [
'title',
];
var arrowPlugin = new Ext.ux.DDArrow({
strokeWidth : 30,
arrowWidth : 80,
color : 'red'
});
//alert("arrowPlugin :"+arrowPlugin);
var leftGrid = new Ext.grid.GridPanel({
ddGroup : 'rightGridDDGroup',
store : new Ext.data.JsonStore({
id : 'leftGridId',
fields : fields,
data : books,
root : 'records'
}),
columns : [
{header: "", width : 120, dataIndex: 'title'},
],
enableDrag : true,
stripeRows : true,
viewConfig : {
forceFit : true
},
autoScroll: true,
collapsible: true,
plugins : [arrowPlugin]
});
var middleGrid = new Ext.grid.GridPanel({
ddGroup : 'middleGridDDGroup',
store : new Ext.data.JsonStore({
fields : fields,
root : 'records'
}),
columns : [
{header: "", width : 120, dataIndex: 'title'},
],
enableDragDrop : false,
stripeRows : false,
viewConfig : {
forceFit : false
},
plugins : [arrowPlugin]
});
var rightGrid = new Ext.grid.GridPanel({
ddGroup : 'leftGridDDGroup',
store : new Ext.data.JsonStore({
id : 'rightGridId',
fields : fields,
data : books,
root : 'records'
}),
columns : [
{header: "", width : 120, dataIndex: 'title'},
],
enableDragDrop : false,
stripeRows : false,
viewConfig : {
forceFit : false
},
autoScroll: true,
plugins : [arrowPlugin]
});
new Ext.Panel({
renderTo : Ext.getBody(),
title : 'EDI To DB Mapping',
width : 800,
height : 300,
layout : {
type : 'hbox',
align : 'stretch'
},
defaults : {
flex : 10
},
items : [
leftGrid,
middleGrid,
rightGrid
]
});
//Based on extjs example
/*
* Setup Drop Targets
*/
// This will make sure we only drop to the view scroller element
var leftGridDropTargetEl = leftGrid.getView().scroller.dom;
var leftGridDropTarget = new Ext.dd.DropTarget(leftGridDropTargetEl, {
ddGroup : 'leftGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
var records = ddSource.dragData.selections;
alert("records len:"+records.length);
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
// leftGrid.store.add(records);
//leftGrid.store.sort('title', 'ASC');
return true
}
});
// This will make sure we only drop to the view scroller element
var rightGridDropTargetEl = rightGrid.getView().scroller.dom;
var rightGridDropTarget = new Ext.dd.DropTarget(rightGridDropTargetEl, {
ddGroup : 'rightGridDDGroup',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
alert(records.length);
//alert(Ext.select('.ext-gen58').elements[0].id);
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
rightGrid.store.add(records);
rightGrid.store.sort('title', 'ASC');
return true
}
});
});
**And this is for drawing(mapping) arrow:**
/*
* Ext.ux.DDArrow
*
* Copyright (c) 2010 Florian Cargoët (http://fcargoet.evolix.net/webdev/extjs/ext-ux-ddarrow/)
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*
* TODO :
* - use viewport size instead of 2000, 2000 for the raphael canvas
* - add more styleable attributes
* - change arrow color/shape in notifyOver if drop allowed/not allowed
* - test on TreePanel
*/
Ext.ns('Ext.ux');
Ext.ux.DDArrow = function(arrowStyle){
//alert("arrow style :"+arrowStyle);
//overrides default arrow style
Ext.apply(this.arrowStyle, arrowStyle);
};
//alert("prototype");
Ext.ux.DDArrow.prototype = {
//default arrow style
arrowStyle : {
strokeWidth : 1,
arrowWidth : 4,
color : 'black'
},
init : function(component){
component.on('render', this.setupDD, this);
},
getDragZone : function(component){
if(component.dragZone){ //should work on TreePanels, not tested yet
return component.dragZone;
}
if(component instanceof Ext.grid.GridPanel){
return component.getView().dragZone;
}
},
setupDD : function(component){
var dragZone = this.getDragZone(component);
//alert("dragZone");
//apply style
Ext.apply(dragZone, this.arrowStyle);
Ext.apply(dragZone,{
/*
* onInitDrag calls onStartDrag excepted in GridDragZone
* let's patch it
*/
onInitDrag : function(x,y){
var data = this.dragData;
this.ddel.innerHTML = this.grid.getDragDropText();
//alert("this.ddel :"+this.ddel.innerHTML);
this.proxy.update(this.ddel);
// fire start drag?
//i would say yes ;-)
this.onStartDrag(x,y);
},
/*
* onStartDrag is called when you initiate the drag action
* it stores the mouse coordinates and create the SVG canvas
*/
onStartDrag : function(x, y){
this.arrowStart = {x:x, y:y};
this.raphaelCanvas = new Raphael(0,0,2000,2000); //could be better...
//apply body.no-cursor (cursor : none) to hide the cursor
//cursor:pointer is nice too
},
/*
* onDrag is called on mousemove
* it clears the canvas and draw the arrow again
*/
onDrag : function(e){
this.raphaelCanvas.clear();
var arrow = this.raphaelCanvas.arrow(this.arrowStart.x, this.arrowStart.y, e.xy[0], e.xy[1],8);
},
/*
* onEndDrag is called when you drop whatever you were dragging
* it removes the SVG canvas from the document
*/
onEndDrag : function(){
this.raphaelCanvas.remove();
delete this.raphaelCanvas;
this.raphaelCanvas.renderfix();
}
});
}
}
//Raphael plugin
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
var angle = Math.atan2(x1-x2,y2-y1);
angle = (angle / (2 * Math.PI)) * 360;
var arrowPath = this.path("M" + x2 + " " + y2 + " L" + (x2 - size) + " " + (y2 - size) + " L" + (x2 - size) + " " + (y2 + size) + " L" + x2 + " " + y2 ).attr("fill","black").rotate((90+angle),x2,y2);
var linePath = this.path("M" + x1 + " " + y1 + " L" + x2 + " " + y2);
return [linePath,arrowPath];
};