Discussion :

[nikko49]

Bonsoir,

Je souhaite mettre en place un drag and drop.
D'un coté, j'ai un DataView contenant des objets que je peux "dragger", et d'un autre coté, j'ai mon arbre dans lequel je veux déposer "dropper" mes éléments.

Mon problème est en fait que cela fonctionne très bien lorsque j'utilise le plugin 'treeviewdragdrop' dans une seule vue, mais si je désire mettre en place ce Drag&Drop dans plusieurs vues, une erreur intervient.

Voilà comment tout ceci est mis en place :

Dans mon treePanel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
viewConfig	: 
    {
    	id : 'treeView',
    	stripeRows: true,
    	plugins : 
    	[
    	 {
    		ddGroup		: 'treeGroup',
    		ptype 		: 'treeviewdragdrop'    		
    	 }
    	]
    }

Dans ma première vue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Ext.define('module_contracts.view.ServiceShop', 
{
	extend		: 'Ext.view.View',
	alias 		: 'widget.serviceShop',
	id			: 'serviceShop',
	store		: 'Services',
 
	mixins: 
	{
		draggable : 'Ext.ux.DataView.Draggable'
	},
 
	tpl: 
	[
	 	'<tpl for=".">',
	  	'<div class="thumb-service" id="{id}">',
	  	'<div class="thumb">',
	  	(!Ext.isIE6? '<img src="../media/com_projidcontracts/images/{type}.png" />' :
	  	'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../media/com_projidcontracts/images/{type}.png\')"></div>'),
	  	'</div>',
	  	'<input type="checkbox" id="check_{id}">',
	  	'<span>{service_code}</span>',
	  	'</div>',
	  	'</tpl>'
	],
 
	itemId			: 'thumb-service',
    itemSelector	: 'div.thumb-service',
    cls				: 'x-image-view',
    height			: 310,
    trackOver		: true,
 
    initComponent	: function() 
    {	
    	this.mixins.draggable.init(this, 
    	{
	    	ddConfig: 
	    	{
	    		ddGroup: 'treeGroup'
	    	}
    	});
 
    	this.callParent(arguments);
    }
});

Jusque là, le drag et drop fonctionne très bien, manque juste les restrictions du drop dans des noeuds particuliers de l'arbre.

Mais quand je décide d'ajouter également le plugin dans une autre View :
De cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Ext.define('module_contracts.view.IndicatorShop', 
{
	extend		: 'Ext.view.View',
	alias 		: 'widget.indicatorShop',
	id			: 'indicatorShop',
	store		: 'Indicators',
 
	mixins: 
	{
		draggable : 'Ext.ux.DataView.Draggable'
	},
 
	tpl: 
	[
	 	'<tpl for=".">',
	  	'<div class="thumb-indicator" id="{id}">',
	  	'<div class="thumb">',
	  	(!Ext.isIE6? '<img src="../media/com_projidcontracts/images/{type}.png" />' :
	  	'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../media/com_projidcontracts/images/{type}.png\')"></div>'),
	  	'</div>',
	  	'<div><img id="status" src="../media/com_projidcontracts/images/{indicator_status_img}.png" class="{indicator_status_img}" /><input type="checkbox" id="check_{id}"></div>',
	  	'<span>{indicator_code}</span>',
	  	'</div>',
	  	'</tpl>'
	],
	itemId			: 'thumb-indicator',
    itemSelector	: 'div.thumb-indicator',
    cls				: 'x-image-view',
    height			: 310,
    trackOver		: true,
 
    initComponent	: function() 
    {	
    	this.mixins.draggable.init(this, 
    	{
	    	ddConfig: 
	    	{
	    		ddGroup: 'treeGroup'
	    	}
    	});
 
    	this.callParent(arguments);
    }
});

Plus rien ne fonctionne et je me retrouve avec l'erreur suivante dans la console de débug :

TypeError: this.el is null
...(l&&l.label?l.label.getBBox():{width:0,height:0}),w=20,t=10,s=10,r;if(!a.width||...

Merci énormément d'avance pour me dire comment mettre en place ce Drag & Drop à partir de plusieurs vues.

[sekaijin]

il semble que le problème ait déjà été remonté à sencha mais je ne connais pas la solution

je te conseille de réactiver cette discussion
http://www.sencha.com/forum/showthre...View.Draggable
et de préciser les version que tu as utilisé.

perso (peut être parce que Ext.ux.DataView.Draggable n'existait pas) j'utilise toujours les méthodes de base de sencha pour le DD
comme dans
http://docs.sencha.com/extjs/4.1.1/#...d_to_grid.html

même si ça demande un peut plus de code je trouve ça plus simple et clair.
A+JYT