PDA

View Full Version : Tutorial dd Part 3 - no alert



rari2003
30 Jan 2008, 7:05 AM
Hi there,

i'm a real beginner with EXTjs and try to learn the use of it by tutorials.
Right now i'm tying to complete the part 3 of the Drag and Drop Tut.
I added the lines as shown.

The whole Script looks right now like this:


/**
* Custom Drag & Drop Tutorial
* by Jozef Sakalos, aka Saki
* http://extjs.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1
*/
Ext.override(Ext.dd.DDProxy, {
startDrag: function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());

dragEl.applyStyles({border:'','z-index':2000});
dragEl.update(el.dom.innerHTML);
dragEl.addClass(el.dom.className + ' dd-proxy');
},
onDragOver: function(e, targetId) {
//console.log('dragOver: ' + targetId);
if('dd1-ct' === targetId || 'dd2-ct' === targetId) {
var target = Ext.get(targetId);
this.lastTarget = target;
target.addClass('dd-over');
}
},
onDragOut: function(e, targetId) {
//console.log('dragOut: ' + targetId);
if('dd1-ct' === targetId || 'dd2-ct' === targetId) {
var target = Ext.get(targetId);
this.lastTarget = null;
target.removeClass('dd-over');
}
},
endDrag: function() {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());
if(this.lastTarget) {
Ext.get(this.lastTarget).appendChild(el);
el.applyStyles({position:'', width:''});
}
else {
el.applyStyles({position:'absolute'});
el.setXY(dragEl.getXY());
el.setWidth(dragEl.getWidth());
}
Ext.get('dd1-ct').removeClass('dd-over');
Ext.get('dd2-ct').removeClass('dd-over');

if('function' === typeof this.config.fn) {
this.config.fn.apply(this.config.scope || window, [this, this.config.dragData]);
}
}
});
// reference local blank image
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

Ext.namespace('Tutorial');

// create application
Tutorial.dd = function() {

// public space
return {

// public methods
init: function() {

// drop zones
var dz1 = new Ext.dd.DropZone('dd1-ct', {ddGroup:'group'});
var dz2 = new Ext.dd.DropZone('dd2-ct', {ddGroup:'group'});


// container 1
var dd11 = Ext.get('dd1-item1');
dd11.dd = new Ext.dd.DDProxy('dd1-item1', 'group', {
dragData:{name:'Item 1.1',index:1},
scope:this,
fn:function(dd, data) {
alert(data.toSource());
}
});

var dd12 = Ext.get('dd1-item2');
dd12.dd = new Ext.dd.DDProxy('dd1-item2', 'group', {
dragData:{name:'Item 1.2',index:2},
scope:this,
fn:function(dd, data) {
alert(data.toSource());
}
});

var dd13 = Ext.get('dd1-item3');
dd13.dd = new Ext.dd.DDProxy('dd1-item3', 'group');


// container 2
var dd21 = Ext.get('dd2-item1');
dd21.dd = new Ext.dd.DDProxy('dd2-item1', 'group');

var dd22 = Ext.get('dd2-item2');
dd22.dd = new Ext.dd.DDProxy('dd2-item2', 'group');

var dd23 = Ext.get('dd2-item3');
dd23.dd = new Ext.dd.DDProxy('dd2-item3', 'group');



}
}


}(); // end of app

// end of file


The Windows Explorer always give a Error Message "The property or function is not avaiable for this element" What did i wrong?

Thnx a lot for help!