add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / dd / dragdropzones.js

/*\r
 * Here is where we "activate" the DataView.\r
 * We have decided that each node with the class "patient-source" encapsulates a single draggable\r
 * object.\r
 *\r
 * So we inject code into the DragZone which, when passed a mousedown event, interrogates\r
 * the event to see if it was within an element with the class "patient-source". If so, we\r
 * return non-null drag data.\r
 *\r
 * Returning non-null drag data indicates that the mousedown event has begun a dragging process.\r
 * The data must contain a property called "ddel" which is a DOM element which provides an image\r
 * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.\r
 * We can insert any other data into the data object, and this will be used by a cooperating DropZone\r
 * to perform the drop operation.\r
 */\r
function initializePatientDragZone(v) {\r
    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {\r
\r
//      On receipt of a mousedown event, see if it is within a draggable element.\r
//      Return a drag data object if so. The data object can contain arbitrary application\r
//      data, but it should also contain a DOM element in the ddel property to provide\r
//      a proxy to drag.\r
        getDragData: function(e) {\r
            var sourceEl = e.getTarget(v.itemSelector, 10), d;\r
            if (sourceEl) {\r
                d = sourceEl.cloneNode(true);\r
                d.id = Ext.id();\r
                return (v.dragData = {\r
                    sourceEl: sourceEl,\r
                    repairXY: Ext.fly(sourceEl).getXY(),\r
                    ddel: d,\r
                    patientData: v.getRecord(sourceEl).data\r
                });\r
            }\r
        },\r
\r
//      Provide coordinates for the proxy to slide back to on failed drag.\r
//      This is the original XY coordinates of the draggable element.\r
        getRepairXY: function() {\r
            return this.dragData.repairXY;\r
        }\r
    });\r
}\r
\r
/*\r
 * Here is where we "activate" the GridPanel.\r
 * We have decided that the element with class "hospital-target" is the element which can receieve\r
 * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called\r
 * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that\r
 * the mouse if over an element which can receieve drop gestures.\r
 *\r
 * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then\r
 * call several "onNodeXXXX" methods at various points. These include:\r
 *\r
 * onNodeEnter\r
 * onNodeOut\r
 * onNodeOver\r
 * onNodeDrop\r
 *\r
 * We provide implementations of each of these to provide behaviour for these events.\r
 */\r
function initializeHospitalDropZone(v) {\r
    var gridView = v,\r
        grid = gridView.up('gridpanel');\r
\r
    function getHospitalFromTarget(target) {\r
        var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),\r
            mainRow = rowBody.previousSibling;\r
\r
        return gridView.getRecord(mainRow);\r
    }\r
\r
    function allowPatient(hospital, name) {\r
        var patients = hospital.get('patients');\r
        return !patients || patients.indexOf(name) === -1;\r
    }\r
\r
    grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {\r
\r
//      If the mouse is over a target node, return that node. This is\r
//      provided as the "target" parameter in all "onNodeXXXX" node event handling functions\r
        getTargetFromEvent: function(e) {\r
            return e.getTarget('.hospital-target');\r
        },\r
\r
//      On entry into a target node, highlight that node.\r
        onNodeEnter : function(target, dd, e, data){\r
            Ext.fly(target).addCls('hospital-target-hover');\r
        },\r
\r
//      On exit from a target node, unhighlight that node.\r
        onNodeOut : function(target, dd, e, data){\r
            Ext.fly(target).removeCls('hospital-target-hover');\r
        },\r
\r
//      While over a target node, return the default drop allowed class which\r
//      places a "tick" icon into the drag proxy.\r
        onNodeOver : function(target, dd, e, data){\r
            var hospital = getHospitalFromTarget(target),\r
                name = data.patientData.name,\r
                proto = Ext.dd.DropZone.prototype;\r
\r
            return allowPatient(hospital, name) ? proto.dropAllowed : proto.dropNotAllowed;\r
        },\r
\r
//      On node drop, we can interrogate the target node to find the underlying\r
//      application object that is the real target of the dragged data.\r
//      In this case, it is a Record in the GridPanel's Store.\r
//      We can use the data set up by the DragZone's getDragData method to read\r
//      any data we decided to attach.\r
        onNodeDrop : function(target, dd, e, data){\r
            var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),\r
                mainRow = rowBody.previousSibling,\r
                hospital = gridView.getRecord(mainRow),\r
                targetEl = Ext.get(target),\r
                html = targetEl.dom.innerHTML,\r
                patients = hospital.get('patients'),\r
                name = data.patientData.name;\r
\r
            if (allowPatient(hospital, name)) {\r
                if (!patients) {\r
                    patients = [];\r
                    hospital.set('patients', patients);\r
                }\r
                patients.push(name);\r
                html = patients.join(', ');\r
                targetEl.update(html);\r
                Ext.Msg.alert('Drop gesture', 'Dropped patient ' + name +\r
                    ' on hospital ' + hospital.get('name'));\r
                \r
                return true;\r
            }\r
            return false;\r
        }\r
    });\r
}\r
\r
\r
Ext.require(['*']);\r
\r
Ext.onReady(function() {\r
\r
    var patients = [{\r
        insuranceCode: '11111',\r
        name: 'Fred Bloggs',\r
        address: 'Main Street',\r
        telephone: '555 1234 123'\r
    }, {\r
        insuranceCode: '22222',\r
        name: 'Fred Bansod',\r
        address: 'Van Ness',\r
        telephone: '666 666 666'\r
    }, {\r
        insuranceCode: '33333',\r
        name: 'Fred Mercury',\r
        address: 'Over The Rainbow',\r
        telephone: '555 321 0987'\r
    }, {\r
        insuranceCode: '44444',\r
        name: 'Fred Forsyth',\r
        address: 'Blimp Street',\r
        telephone: '555 111 2222'\r
    }, {\r
        insuranceCode: '55555',\r
        name: 'Fred Douglass',\r
        address: 'Talbot County, Maryland',\r
        telephone: 'N/A'\r
    }];\r
\r
    Ext.define('Patient', {\r
        extend: 'Ext.data.Model',\r
        idProperty: 'insuranceCode',\r
        fields: ['name', 'address', 'telephone']\r
    });\r
\r
    var patientStore = Ext.create('Ext.data.Store', {\r
        model: 'Patient',\r
        data: patients\r
    });\r
\r
    var hospitals = [{\r
        code: 'AAAAA',\r
        name: 'Saint Thomas',\r
        address: 'Westminster Bridge Road, SE1 7EH',\r
        telephone: '020 7188 7188'\r
    }, {\r
        code: 'BBBBB',\r
        name: 'Queen\'s Medical Centre',\r
        address: 'Derby Road, NG7 2UH',\r
        telephone: '0115 924 9924'\r
    }, {\r
        code: 'CCCCC',\r
        name: 'Saint Bartholomew',\r
        address: 'West Smithfield, EC1A 7BE',\r
        telephone: '020 7377 7000'\r
    }, {\r
        code: 'DDDDD',\r
        name: 'Royal London',\r
        address: 'Whitechapel, E1 1BB',\r
        telephone: '020 7377 7000'\r
    }];\r
\r
    Ext.define('Hospital', {\r
        extend: 'Ext.data.Model',\r
        idProperty: 'code',\r
        fields: ['name', 'address', 'telephone', 'patients']\r
    });\r
\r
    var hospitalStore = Ext.create('Ext.data.Store', {\r
        model: 'Hospital',\r
        data: hospitals\r
    });\r
\r
    var patientView = Ext.create('Ext.view.View', {\r
        cls: 'patient-view',\r
        tpl: '<tpl for=".">' +\r
                '<div class="patient-source"><table><tbody>' +\r
                    '<tr><td class="patient-label">Name</td><td class="patient-name">{name}</td></tr>' +\r
                    '<tr><td class="patient-label">Address</td><td class="patient-name">{address}</td></tr>' +\r
                    '<tr><td class="patient-label">Telephone</td><td class="patient-name">{telephone}</td></tr>' +\r
                '</tbody></table></div>' +\r
             '</tpl>',\r
        itemSelector: 'div.patient-source',\r
        overItemCls: 'patient-over',\r
        selectedItemClass: 'patient-selected',\r
        singleSelect: true,\r
        store: patientStore,\r
        listeners: {\r
            render: initializePatientDragZone\r
        }\r
    });\r
\r
    var helpWindow = Ext.create('Ext.Window', {\r
        title: 'Source code',\r
        width: 920,\r
        height: 500,\r
        closeAction: 'hide',\r
        layout: 'fit',\r
        items: [{\r
            xtype: 'component',\r
            scrollable: true,\r
            itemId: 'src',\r
            padding: 10\r
        }],\r
        listeners: {\r
            render: function(w) {\r
                Ext.Ajax.request({\r
                    url: 'dragdropzones.js',\r
                    success: function(r) {\r
                        var text = Ext.htmlEncode(r.responseText);\r
                        w.down('#src').update('<pre>' + text + '</pre>');\r
                    }\r
                });\r
            }\r
        }\r
    });\r
\r
    var hospitalGrid = Ext.create('Ext.grid.Panel', {\r
        title: 'Hospitals',\r
        region: 'center',\r
        margin: '0 5 5 0',\r
        bbar: [{\r
            text: 'View Source',\r
            handler: function() {\r
                helpWindow.show();\r
            }\r
        }],\r
        sortableColumns: false,\r
        columns: [{\r
            dataIndex: 'name',\r
            header: 'Name',\r
            width: 200\r
        }, {\r
            dataIndex: 'address',\r
            header: 'Address',\r
            width: 300\r
        }, {\r
            dataIndex: 'telephone',\r
            header: 'Telephone',\r
            width: 100\r
        }],\r
        features: [{\r
            ftype:'rowbody',\r
            setup: function(rows, rowValues) {\r
                Ext.grid.feature.RowBody.prototype.setup.apply(this, arguments);\r
                rowValues.rowBodyDivCls = 'hospital-target';\r
            },\r
            getAdditionalData: function(data) {\r
                var patients = data.patients,\r
                    html;\r
                if (patients) {\r
                    html = patients.join(', ');\r
                } else {\r
                    html = 'Drop patients here';\r
                }\r
                return {\r
                    rowBody: html\r
                };\r
            }\r
        }],\r
        viewConfig: {\r
            listeners: {\r
                render: initializeHospitalDropZone\r
            }\r
        },\r
        store: hospitalStore\r
    });\r
\r
    Ext.create('Ext.Viewport', {\r
        layout: 'border',\r
        items: [{\r
            cls: 'app-header',\r
            region: 'north',\r
            height: 45,\r
            html: '<h1>Patient Hospital Assignment</h1>',\r
            margin: '5 5 5 5'\r
        }, {\r
            title: 'Patients',\r
            region: 'west',\r
            width: 300,\r
            margin: '0 5 5 5',\r
            items: patientView\r
        }, hospitalGrid ]\r
    });\r
});\r