1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    57
    Vote Rating
    0
    alexpetri is on a distinguished road

      0  

    Default DragnDrop Questions

    DragnDrop Questions


    Hi,

    i have some troubles getting my DragnDrop Test to work. Its based on the hospital example.
    I have a simple viewport which contains the dropzone in center and the draggable Elements in the east panel

    Code:
    Ext.onReady(function(){
                    Ext.QuickTips.init();
                    var myViewPort = new Ext.Viewport({
                        layout: 'border',
                        items: [{
                            cls: 'app-header',region: 'north', height: 100,
                            html: '<h1>my Drop Test</h1>'
                        }, {
                            title: 'Patients',region: 'east', width: 300,
                            items: patientView,
                            id: 'patientDragPanel',
                            collapsible: true
                        }, {
                            region: 'center',
                            margins: '0 5 5 0',
                            title: 'MainPanel',
                            id: 'PatientDropPanel',
                            layout: 'fit',
                            items: {
                                cls: 'dropZone',
                                html: 'content',
                                id: 'myDropContainer' 
                            }
                        }]
                    });
                    var dragZone1 = new MyDragZone(patientView, {
                        containerScroll: true, ddGroup: 'organizerDD'
                    });
                    var dropZone1 = new MyDropZone(Ext.getCmp('PatientDropPanel'), {
                        containerScroll: true, ddGroup: 'organizerDD'
                    })
                });
    so i build up the patient view in the east panel:
    Code:
         var patients = [
         	{insuranceCode: '11111',name: 'Fred Bloggs', address: 'Main Street', telephone: '555 1234 123'}, 
         	{insuranceCode: '22222',name: 'Fred West',address: 'Cromwell Street',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'}
         ];
    
        var PatientRecord = Ext.data.Record.create([{ name: 'name' }, { name: 'address' }, { name: 'telephone'}]);
    
        var patientStore = new Ext.data.Store({
            data: patients,
            reader: new Ext.data.JsonReader({id: 'insuranceCode'}, PatientRecord)
        });
    
        var patientView = new Ext.DataView({
    		id:'myPatientView',
            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><hr/></div>' +
                 '</tpl>',
            itemSelector: 'div.patient-source',
            store: patientStore
        });
    and add the drag/dropzones:
    Code:
    MyDragZone = function(view, config){
    	this.view = view;
    	console.log('drag Zone initialized: '+view.getEl().id);
    	MyDragZone.superclass.constructor.call(this, view.getEl(), config);
    };
    
    Ext.extend(MyDragZone, Ext.dd.DragZone, {
    	getDragData : function(e){
    		
    		var view = this.view;
    		// get the source Element from EventTarget
    		var sourceElement = e.getTarget(view.itemSelector,100);
    		if(sourceElement){
    			console.log('sourceElement found ');
    			console.log(view.id);
    			clonedSourceElement = sourceElement.cloneNode(true);
    			clonedSourceElement.id = Ext.id();
    			var dragData = {
    				ddel:clonedSourceElement,
    				sourceElementPosition: Ext.fly(sourceElement).getXY(),
    				patientData: view.getRecord(sourceElement).data,
    				patientRecord:view.getRecord(sourceElement)
    			}
    			return dragData;
    		}else{
    			console.log('no Target found');
    			return false;
    		}
        },
    	getRepairXY: function(e){
    		return this.dragData.sourceElementPosition;
    	}
    });
    Code:
    MyDropZone = function(view, config) {
    	this.view = view;
    	console.log('drop Zone initialized: ' + view.getEl().id);
    	MyDropZone.superclass.constructor.call(this, view.getEl(), config);
    
    };
    Ext.extend(MyDropZone, Ext.dd.DropZone, {
    	getTargetFromEvent : function(e) {
    		var view = this.view;
    		return e.getTarget('.dropZone');
    	},
    	onNodeOver : function(target, dd, e, data) {
    		return Ext.dd.DropZone.prototype.dropAllowed;
    	},
    	onNodeDrop : function(target, dd, e, data) {
    		Ext.Msg.alert('Drop gesture', 'Dropped patient '
    				+ data.patientData.name + ' on panel');
    		var pw = Ext.getCmp('myPatientView');
    		var dropContainer = Ext.get('myDropContainer');
    		alert(dropContainer.html);
    		dropContainer.html = dropContainer.html + "<br/>"
    				+ data.patientData.name + " added";
    		console.log(pw.store.getCount());
    		pw.store.remove(data.patientRecord);
    		console.log(pw.store.getCount());
    		pw.render();
    		return true;
    	}
    });
    Dragging the "patient"-Objects works properly - but i have some troubles to get the dropZone (which should be the center panel in my viewport). Sometimes the dragobject recognizes that it is over the dragzone, and sometimes it doesnt - so i cant drop (the dragobject doesnt show the green checkmark/tick). I cant figure out whats the problem there - please help me.

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    In FF2?

    If so, then it's to do with mousedowning on whitespace as opposed to text, and it's fixed in FF3.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    57
    Vote Rating
    0
    alexpetri is on a distinguished road

      0  

    Default


    how can i fix that?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I don't think you can. It's an FF2 problem. I noticed it when I was writing and testing that example, and I hunted for a bug in my code or Ext code, and came up with nothing. It's the browser that's at fault I think.

Thread Participants: 1