we54188 2016-12-05 13:44 采纳率: 50%
浏览 1231

【求Ext拖动问题】Ext.dd.DropZone

问题描述:Ext6拖动后无法获取到目的地的相关属性。

代码:(拿API中的demo举例 - dragdropzones.html)

问:如何在拖动释放鼠标后的 onNodeDrop 监听方法里获取到 hospitals 对象中的属性(如 code、name、address等)? 谢谢!

  • 写回答

2条回答 默认 最新

  • we54188 2016-12-05 13:43
    关注

    【附代码】

    function initializePatientDragZone(v) {
    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {

        getDragData: function(e) {
            var sourceEl = e.getTarget(v.itemSelector, 10), d;
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return (v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    patientData: v.getRecord(sourceEl).data
                });
            }
        },
    
    
        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
    

    }

    function initializeHospitalDropZone(v) {
    var gridView = v,
    grid = gridView.up('gridpanel');

    grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
    
    
        getTargetFromEvent: function(e) {
            return e.getTarget('.hospital-target');
        },
    
    
        onNodeEnter : function(target, dd, e, data){
            Ext.fly(target).addCls('hospital-target-hover');
        },
    
        onNodeOut : function(target, dd, e, data){
            Ext.fly(target).removeCls('hospital-target-hover');
        },
    
        onNodeOver : function(target, dd, e, data){
            return Ext.dd.DropZone.prototype.dropAllowed;
        },
    
        onNodeDrop : function(target, dd, e, data){
            var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
                mainRow = rowBody.previousSibling,
                h = gridView.getRecord(mainRow),
                targetEl = Ext.get(target),
                html = targetEl.dom.innerHTML;
    
            if (html == 'Drop Patient Here') {
                html = data.patientData.name
            } else {
                html = data.patientData.name + ', ' + targetEl.dom.innerHTML;
            }
    
            targetEl.update(html);
            Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.name +
                ' on hospital ' + h.data.name);
            return true;
        }
    });
    

    }

    Ext.require(['*']);

    Ext.onReady(function() {

    var patients = [{
        insuranceCode: '11111',
        name: 'Fred Bloggs',
        address: 'Main Street',
        telephone: '555 1234 123'
    }, {
        insuranceCode: '22222',
        name: 'Fred Bansod',
        address: 'Van Ness',
        telephone: '666 666 666'
    }, {
        insuranceCode: '33333',
        name: 'Fred Mercury',
        address: 'Over The Rainbow',
        telephone: '555 321 0987'
    }, {
        insuranceCode: '44444',
        name: 'Fred Forsyth',
        address: 'Blimp Street',
        telephone: '555 111 2222'
    }, {
        insuranceCode: '55555',
        name: 'Fred Douglass',
        address: 'Talbot County, Maryland',
        telephone: 'N/A'
    }];
    
    Ext.define('Patient', {
        extend: 'Ext.data.Model',
        idProperty: 'insuranceCode',
        fields: [{
                name: 'name'
            }, {
                name: 'address'
            }, {
                name: 'telephone'
            }]
    });
    
    var patientStore = Ext.create('Ext.data.Store', {
        model: 'Patient',
        data: patients
    });
    
    var hospitals = [{
        code: 'AAAAA',
        name: 'Saint Thomas',
        address: 'Westminster Bridge Road, SE1 7EH',
        telephone: '020 7188 7188'
    }, {
        code: 'BBBBB',
        name: 'Queen\'s Medical Centre',
        address: 'Derby Road, NG7 2UH',
        telephone: '0115 924 9924'
    }, {
        code: 'CCCCC',
        name: 'Saint Bartholomew',
        address: 'West Smithfield, EC1A 7BE',
        telephone: '020 7377 7000'
    }, {
        code: 'DDDDD',
        name: 'Royal London',
        address: 'Whitechapel, E1 1BB',
        telephone: '020 7377 7000'
    }];
    
    Ext.define('Hospital', {
        extend: 'Ext.data.Model',
        idProperty: 'code',
        fields: [{
            name: 'name'
        }, {
            name: 'address'
        }, {
            name: 'telephone'
        }]
    });
    
    var hospitalStore = Ext.create('Ext.data.Store', {
        model: 'Hospital',
        data: hospitals
    });
    
    var patientView = Ext.create('Ext.view.View', {
        cls: 'patient-view',
        tpl: '<tpl for=".">' +
                '<div class="patient-source"><table><tbody>' +
                    '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +
                    '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +
                    '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +
                '</tbody></table></div>' +
             '</tpl>',
        itemSelector: 'div.patient-source',
        overItemCls: 'patient-over',
        selectedItemClass: 'patient-selected',
        singleSelect: true,
        store: patientStore,
        listeners: {
            render: initializePatientDragZone
        }
    });
    
    var helpWindow = Ext.create('Ext.Window', {
        title: 'Source code',
        width: 920,
        height: 500,
        closeAction: 'hide',
        layout: 'fit',
        items: [
            {
                xtype: 'textarea',
                itemId: 'srcTextArea'
            }
        ],
        listeners: {
            render: function(w) {
                Ext.Ajax.request({
                    url: 'dragdropzones.js',
                    success: function(r) {
                        w.down('#srcTextArea').setValue(r.responseText);
                    }
                });
            }
        }
    });
    
    var hospitalGrid = Ext.create('Ext.grid.Panel', {
        title: 'Hospitals',
        region: 'center',
        margins: '0 5 5 0',
        bbar: [{
            text: 'View Source',
            handler: function() {
                helpWindow.show();
            }
        }],
        sortableColumns: false,
        columns: [{
            dataIndex: 'name',
            header: 'Name',
            width: 200
        }, {
            dataIndex: 'address',
            header: 'Address',
            width: 300
        }, {
            dataIndex: 'telephone',
            header: 'Telephone',
            width: 100
        }],
        features: [{
            ftype:'rowbody',
            setup: function(rows, rowValues) {
                Ext.grid.feature.RowBody.prototype.setup.apply(this, arguments);
                rowValues.rowBody = 'Drop Patient Here';
                rowValues.rowBodyDivCls = 'hospital-target';
            }
        }],
        viewConfig: {
            listeners: {
                render: initializeHospitalDropZone
            }
        },
        store: hospitalStore
    });
    
    Ext.create('Ext.Viewport', {
        layout: 'border',
        items: [{
            cls: 'app-header',
            region: 'north',
            height: 30,
            html: '<h1>Patient Hospital Assignment</h1>',
            margins: '5 5 5 5'
        }, {
            title: 'Patients',
            region: 'west',
            width: 300,
            margins: '0 5 5 5',
            items: patientView
        }, hospitalGrid ]
    });
    

    });

    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗