Results 1 to 4 of 4

Thread: DragnDrop Questions

  1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    57
    Vote Rating
    0
      0  

    Default 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
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    60
      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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    57
    Vote Rating
    0
      0  

    Default

    how can i fix that?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    60
      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.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •