1

我创建了两个网格面板左网格面板和右网格面板,我想在这些网格面板元素之间绘制一条箭头线,我需要获取左网格面板的每个元素 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];
    };
4

1 回答 1

0

使用以下过程:

于 2014-10-09T00:15:52.000 回答