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,501
    Vote Rating
    47
    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,501
    Vote Rating
    47
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi