0

我使用 extjs 4 示例 dragdropzones.js 。它运行良好。但我想删除添加的项目意味着从面板中拖动项目。帮助解决这个问题。我尝试从函数 onNodeDrop 调用 onclick 上的另一个函数并尝试传递和访问目标,但它不起作用意味着它显示空值。所以我不了解这将是什么程序。

Ext.require(['*']);
Ext.onReady(function() {


     Ext.define('Accountformfield', {
        extend: 'Ext.data.Model',
        idProperty: 'id',
        fields: [{
                name: 'formfieldname'
            }, {
                name: 'id'
            }]
    });
    var fields = [{
        id: '1',
        formfieldname: 'field1'
    }, {
        id: '2',
        formfieldname: 'field2'
    }, {
        id: '3',
        formfieldname: 'field3'
    }, {
        id: '4',
        formfieldname: 'field4'
    }, {
        id: '5',
        formfieldname: 'Field5'
    }];


    var fieldStore = Ext.create('Ext.data.Store', {
        model: 'Accountformfield',
        data: fields
    });

    var groups = [{
        id: 1,
        name: 'Group1'
    }, {
         id: 2,
        name: 'Group2'
    }, {
         id: 3,
        name: 'Group3'
    }];

    Ext.define('Formfieldgroup', {
        extend: 'Ext.data.Model',
        idProperty: 'id',
        fields: [{
            name: 'name'
        }]
    });

    var groupStore = Ext.create('Ext.data.Store', {
        model: 'Formfieldgroup',
        data: groups
    });

    var fieldView = 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">{formfieldname}</td></tr>' +
                '</tbody></table></div>' +
             '</tpl>',
        itemSelector: 'div.patient-source',
        overItemCls: 'patient-over',
        selectedItemClass: 'patient-selected',
        singleSelect: true,
        store: fieldStore,
        listeners: {
            render: initializePatientDragZone,
                    el: {
                            click: function() {
                            Ext.Msg.alert('drag');
                        }
                   }
        }
    });

    var mapingGrid = Ext.create('Ext.grid.GridPanel', {
        title: 'Group Maintainance',
        region: 'center',
        margins: '0 5 5 0',
        hideHeaders: true,
        sortableColumns: false,
        columns: [{
            dataIndex: 'name',
            width:'100%'
        }],
        features: [{
            ftype:'rowbody',
            rowBodyDivCls: 'hospital-target',
            getAdditionalData: function() {
                return Ext.apply(Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments), {
                    rowBody: 'Drop Field Here'
                });
            }
        }
        ],
        viewConfig: {
            listeners: {
                render: initializeHospitalDropZone
            }
        },
        store: groupStore,
        buttons: [{
            text: 'Save',
            handler: function(){
                var form = formpanel.getForm();
                form.loadRecord(record);
                if(form.isValid()){
                    form.submit({
                        url: 'accounts',
                        //waitMsg: 'Uploading your photo...',
                        success: function(fp, o) {
                            msg('Success', 'Processed file "' + o.result.file + '" on the server');
                        }
                    });
                }
            }
        }]
    });

    Ext.create('Ext.Viewport', {
        layout: 'border',
        items: [{
            cls: 'app-header',
            region: 'north',
            height: 30,
            html: '<h1>Form Maintainance</h1>',
            margins: '5 5 5 5'
        }, {
            title: 'Fields',
            region: 'west',
            width: 300,
            margins: '0 5 5 5',
            items: fieldView
        }, mapingGrid
            ]
    });
});

/*
 * Here is where we "activate" the DataView.
 * We have decided that each node with the class "patient-source" encapsulates a single draggable
 * object.
 *
 * So we inject code into the DragZone which, when passed a mousedown event, interrogates
 * the event to see if it was within an element with the class "patient-source". If so, we
 * return non-null drag data.
 *
 * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
 * The data must contain a property called "ddel" which is a DOM element which provides an image
 * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
 * We can insert any other data into the data object, and this will be used by a cooperating DropZone
 * to perform the drop operation.
 */
function initializePatientDragZone(v) {
    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {

//      On receipt of a mousedown event, see if it is within a draggable element.
//      Return a drag data object if so. The data object can contain arbitrary application
//      data, but it should also contain a DOM element in the ddel property to provide
//      a proxy to drag.
        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
                };
            }
        },

//      Provide coordinates for the proxy to slide back to on failed drag.
//      This is the original XY coordinates of the draggable element.
        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });
}

/*
 * Here is where we "activate" the GridPanel.
 * We have decided that the element with class "hospital-target" is the element which can receieve
 * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
 * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
 * the mouse if over an element which can receieve drop gestures.
 *
 * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
 * call several "onNodeXXXX" methods at various points. These include:
 *
 * onNodeEnter
 * onNodeOut
 * onNodeOver
 * onNodeDrop
 *
 * We provide implementations of each of these to provide behaviour for these events.
 */
function initializeHospitalDropZone(v) {
    var gridView = v,
        grid = gridView.up('gridpanel');

    grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {

//      If the mouse is over a target node, return that node. This is
//      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
        getTargetFromEvent: function(e) {
            return e.getTarget('.hospital-target');
        },

//      On entry into a target node, highlight that node.
        onNodeEnter : function(target, dd, e, data){
            Ext.fly(target).addCls('hospital-target-hover');
        },

//      On exit from a target node, unhighlight that node.
        onNodeOut : function(target, dd, e, data){
            Ext.fly(target).removeCls('hospital-target-hover');
        },

//      While over a target node, return the default drop allowed class which
//      places a "tick" icon into the drag proxy.
        onNodeOver : function(target, dd, e, data){
            return Ext.dd.DropZone.prototype.dropAllowed;
        },

//      On node drop, we can interrogate the target node to find the underlying
//      application object that is the real target of the dragged data.
//      In this case, it is a Record in the GridPanel's Store.
//      We can use the data set up by the DragZone's getDragData method to read
//      any data we decided to attach.
        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);
        targetEl.update('<a onclick="remove(\''+data.patientData.id+'\');">'+data.patientData.formfieldname + '</a>,' + targetEl.dom.innerHTML);
        //Ext.Msg.alert(targetEl.dom.innerHTML);
        //Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.formfieldname +' on hospital ' + h.data.name);
            return true;
        }
    });
}
4

1 回答 1

1

首先,将 id 添加到您的 Patient View 和每个模板行:

    fieldView = Ext.create('Ext.view.View', {

    // add id
    id: "patientView",
    cls: 'patient-view',

    // for each item add appropriate id
    tpl: '<tpl for=".">' +
            '<div id="{id}" class="patient-source"><table><tbody>' +
                '<tr><td class="patient-label">Name</td><td class="patient-name">{formfieldname}</td></tr>' +
            '</tbody></table></div>' +
         '</tpl>',
    itemSelector: 'div.patient-source',
    overItemCls: 'patient-over',
    selectedItemClass: 'patient-selected',
    singleSelect: true,
    store: fieldStore,
    listeners: {
        render: initializePatientDragZone,
                el: {
                        click: function() {
                        Ext.Msg.alert('drag');
                    }
               }
    }
});

接下来,在 onNodeDrop 处理程序中添加下一个从 DOM 中删除 html 行的代码

    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);
    targetEl.update('<a onclick="remove(\''+data.patientData.id+'\');">'+data.patientData.formfieldname + '</a>,' + targetEl.dom.innerHTML);

    // This code removes HTML row from the control. 
var htmlNode = Ext.getCmp("patientView").el.down("#"+data.patientData.id);
htmlNode.remove();

    return true;
    }
于 2012-10-21T14:36:35.583 回答